style(storybook): refine foundation and navigation stories

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>
   ),