style(storybook): refine foundation and navigation stories

src/components/breadcrumb.stories.tsx

@@ -13,7 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // The representative "Breadcrumb" Story shows each case on one page (real links with sample hrefs); the same specimens also exist
@@ -122,20 +122,33 @@ const meta = { title: "Components/Navigation/Breadcrumb", component: Breadcrumb,
 export default meta
 type Story = StoryObj<typeof meta>
 
-const board = (...ids: string[]) => (
-  <StateBoard min={420} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: narrow(s.node) }))} />
-)
+// Representative-page layout (Storybook presentation only): Variants use 3 equal columns on PC (iframe width 1000px and up),
+// fewer below that (240px minimum). Each specimen sits in its own single-column StateBoard (min larger than any column), so
+// StateBoard's auto-fill grid cannot leave an empty or stretched track.
+const specimen = (id: string, children?: ReactNode): BoardState => {
+  const s = sections.find((section) => section.id === id)!
+  return { id: s.id, label: s.label, children: children ?? narrow(s.node) }
+}
 
 // Representative Story: the common Story page; the sections group the same specimens.
+// Overview is merged into Variants (Basic is its first item). The Long path example gets up to 900px so it fits on one line on
+// PC; BreadcrumbList is `flex-wrap`, so it wraps naturally (never clipped or forced nowrap) when the space is narrower.
 export const All: Story = {
   name: "Breadcrumb",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Breadcrumb" />
-      <StorySection title="Overview">{board("basic")}</StorySection>
-      <StorySection title="Variants">{board("ellipsis", "custom")}</StorySection>
-      <StorySection title="Usage">{board("long")}</StorySection>
+      <StorySection title="Variants">
+        <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
+          {["basic", "ellipsis", "custom"].map((id) => (
+            <StateBoard key={id} min={10000} states={[specimen(id)]} />
+          ))}
+        </div>
+      </StorySection>
+      <StorySection title="Usage">
+        <StateBoard min={10000} states={[specimen("long", <div className="w-full max-w-[900px]">{sections.find((s) => s.id === "long")!.node}</div>)]} />
+      </StorySection>
     </StoryPage>
   ),
 }

src/components/menubar.stories.tsx

@@ -97,10 +97,10 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Menubar" />
-      <StorySection title="Overview">
-        <div style={{ minHeight: 384 }}>
-          <Specimen />
-        </div>
+      {/* The section is titled Basic (was Overview). The former `minHeight: 384` reserved room for the open menus; they render in a
+          portal over the page (with collision handling), nothing follows this section, so the fixed height is not needed. */}
+      <StorySection title="Basic">
+        <Specimen />
       </StorySection>
     </StoryPage>
   ),

src/components/navigation-menu.stories.tsx

@@ -83,10 +83,13 @@ function Specimen({ viewport = true }: { viewport?: boolean }) {
 
 // Size specimens to their review area (including the panel's 8px padding + 1px border on each side).
 // Mobile uses the content's natural minimum width instead of a fixed desktop specimen width.
-const frame = (node: ReactNode) => (
+// `minHeight: 256` reserves room for the open panel (about 232px below the menu bar) so it never covers what follows.
+// `compact` (representative page only) drops that reservation on PC (iframe width 1000px and up), where the two examples sit side by
+// side and nothing is below them; in the one-column layout below 1000px the 256px stays so an open menu does not cover the next example.
+const frame = (node: ReactNode, compact = false) => (
   <div
-    style={{ minHeight: 256, width: "100%", containerType: "inline-size" }}
-    className="max-md:[&_[data-viewport=false]_[data-slot=navigation-menu-content]]:absolute"
+    style={{ width: "100%", containerType: "inline-size", ...(compact ? {} : { minHeight: 256 }) }}
+    className={`max-md:[&_[data-viewport=false]_[data-slot=navigation-menu-content]]:absolute${compact ? " max-[999px]:min-h-64" : ""}`}
   >
     {node}
   </div>
@@ -102,21 +105,13 @@ export const All: Story = {
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Navigation Menu" />
-      <StorySection title="Overview">
-        <StateBoard
-          min={520}
-          states={[
-            { id: "viewport", label: "Viewport", children: frame(<Specimen />) },
-          ]}
-        />
-      </StorySection>
+      {/* Overview is merged into Variants (Viewport is its first item). Two equal columns on PC (iframe width 1000px and up), one
+          column below that; each specimen sits in its own single-column StateBoard (min larger than any column). */}
       <StorySection title="Variants">
-        <StateBoard
-          min={520}
-          states={[
-            { id: "no-viewport", label: "No viewport", children: frame(<Specimen viewport={false} />) },
-          ]}
-        />
+        <div className="grid items-start gap-6 min-[1000px]:grid-cols-2">
+          <StateBoard min={10000} states={[{ id: "viewport", label: "Viewport", children: frame(<Specimen />, true) }]} />
+          <StateBoard min={10000} states={[{ id: "no-viewport", label: "No viewport", children: frame(<Specimen viewport={false} />, true) }]} />
+        </div>
       </StorySection>
     </StoryPage>
   ),

src/components/pagination.stories.tsx

@@ -79,20 +79,30 @@ const meta = { title: "Components/Navigation/Pagination", component: Pagination,
 export default meta
 type Story = StoryObj<typeof meta>
 
-const board = (...ids: string[]) => (
-  <StateBoard min={420} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: wrap(s.node) }))} />
-)
+// Representative-page layout (Storybook presentation only): one Variants section, 2 equal columns x 2 rows on PC (iframe width
+// 1030px and up), 1 column below that. Each specimen sits in its own single-column StateBoard (min larger than any
+// column), so every title and divider has the width of its column. The Pagination root is `mx-auto flex w-full justify-center`;
+// `justify-start` on the cell left-aligns the button group in its column without stretching it.
+const cellAlignLeft = "w-full [&_[data-slot=pagination]]:justify-start"
 
-// Representative Story: the common Story page; the sections group the same specimens.
+// Representative Story: the common Story page. Overview / States / Usage are merged into Variants
+// (First page, Middle page, Last page, Long range).
 export const All: Story = {
   name: "Pagination",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Pagination" />
-      <StorySection title="Overview">{board("middle")}</StorySection>
-      <StorySection title="States">{board("first", "last")}</StorySection>
-      <StorySection title="Usage">{board("ellipsis")}</StorySection>
+      <StorySection title="Variants">
+        {/* Long range is 447px wide (20 pages, 7 items), so a column must be at least that: 16px column gap and the 2-column switch at
+            iframe width 1030px give 449px columns at 1280px; below that it is one column (460px minimum) instead of a wrapped "Next". */}
+        <div className="grid items-start gap-x-4 gap-y-8 [grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr))] min-[1030px]:grid-cols-2">
+          {["first", "middle", "last", "ellipsis"].map((id) => {
+            const spec = sections.find((section) => section.id === id)!
+            return <StateBoard key={id} min={10000} states={[{ id: spec.id, label: spec.label, children: <div className={cellAlignLeft}>{spec.node}</div> }]} />
+          })}
+        </div>
+      </StorySection>
     </StoryPage>
   ),
 }

src/components/tabs.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { useId, useState, type ComponentProps, type CSSProperties } from "react"
+import { useId, useState, type ComponentProps, type CSSProperties, type ReactNode } from "react"
 import {
   Card, CardContent, CardHeader, CardTitle, Input, Label, Textarea,
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
   Tabs, TabsContent, TabsList, TabsTrigger,
 } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // Representative "Tabs" Story shows default Primary, explicit API comparisons and Secondary; Legacy stays verification-only.
@@ -127,6 +127,18 @@ function LongLabelSpecimens() {
   )
 }
 
+// Equal two columns on PC (one column below 900px). Each board holds a single specimen: StateBoard's own auto-fill grid
+// would leave an empty third column for two items, so `min` is forced above any column width (same approach as Button).
+const TwoColumns = ({ children }: { children: ReactNode }) => (
+  <div className="grid items-start gap-6 min-[900px]:grid-cols-[repeat(2,minmax(0,1fr))]">{children}</div>
+)
+const SingleBoard = ({ states }: { states: BoardState[] }) => <StateBoard min={10000} states={states} />
+// Variants: equal three columns on PC (iframe width 1000px and up); fewer columns below that (240px minimum). `min-w-0` lets the
+// Overflow Tabs keep its own internal scroll (previous / next buttons) inside its column instead of widening the page.
+const ThreeColumns = ({ children }: { children: ReactNode }) => (
+  <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">{children}</div>
+)
+
 const meta = {
   title: "Components/Navigation/Tabs",
   component: Tabs,
@@ -147,34 +159,23 @@ export const All: Story = {
   name: "Tabs",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
-    <StoryPage>
+    // `py-4!` trims this page's top and bottom padding (30-40px by viewport width) so the page fits a 900px-high PC screen without
+    // shrinking any component; the important modifier is needed because the shared rule has the same specificity. Section gaps stay 32px.
+    <StoryPage className="py-4!">
       <StoryPageHeader title="Tabs" />
-      <StorySection title="Overview">
-        <StateBoard
-          states={[
-            { id: "primary", label: "Primary", children: <Specimen /> },
-          ]}
-        />
-      </StorySection>
       <StorySection title="Variants">
-        <StateBoard
-          states={[
-            { id: "secondary", label: "Secondary", children: <Specimen variant="secondary" /> },
-          ]}
-        />
-      </StorySection>
-      <StorySection title="States">
-        <StateBoard
-          states={[
-            { id: "overflow", wide: true, label: "Overflow", children: <div className="w-full min-w-0 max-w-4xl"><Specimen count={20} /></div> },
-          ]}
-        />
+        {/* The former States section (Overflow) is the third Variants item. */}
+        <ThreeColumns>
+          <SingleBoard states={[{ id: "primary", label: "Primary", children: <Specimen /> }]} />
+          <SingleBoard states={[{ id: "secondary", label: "Secondary", children: <Specimen variant="secondary" /> }]} />
+          <SingleBoard states={[{ id: "overflow", label: "Overflow", children: <div className="w-full min-w-0"><Specimen count={20} /></div> }]} />
+        </ThreeColumns>
       </StorySection>
       <StorySection title="Usage">
-        <StateBoard states={[
-          { id: "usage-card", label: "Card 내부 · Secondary", children: <SurfaceUsage inCard /> },
-          { id: "usage-page", label: "페이지 직접 배치 · Primary", children: <SurfaceUsage /> },
-        ]} />
+        <TwoColumns>
+          <SingleBoard states={[{ id: "usage-card", label: "Card 내부 · Secondary", children: <div className="w-full min-w-0 max-w-lg"><SurfaceUsage inCard /></div> }]} />
+          <SingleBoard states={[{ id: "usage-page", label: "페이지 직접 배치 · Primary", children: <div className="w-full min-w-0 max-w-lg"><SurfaceUsage /></div> }]} />
+        </TwoColumns>
       </StorySection>
     </StoryPage>
   ),