style(storybook): refine data display story layout

src/components/separator.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Separator } 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"
 
 const meta = {
@@ -20,15 +20,35 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+// Representative-page layout (Storybook presentation only): 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 every subtitle and divider
+// has the width of its column; a section with fewer specimens than columns leaves the remaining columns empty.
+const specimenColumns = {
+  2: "min-[1000px]:grid-cols-2",
+  3: "min-[1000px]:grid-cols-3",
+  4: "min-[1000px]:grid-cols-4",
+} as const
+
+function SpecimenGrid({ states, columns }: { states: BoardState[]; columns: 2 | 3 | 4 }) {
+  return (
+    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] ${specimenColumns[columns]}`}>
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[state]} />
+      ))}
+    </div>
+  )
+}
+
+// Representative Story: Overview (Horizontal) and Variants (Vertical, Semantic) are merged into one Variants section. 3 columns on PC.
 export const All: Story = {
   name: "Separator",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Separator" />
-      <StorySection title="Overview">
-        <StateBoard
-          min={280}
+      <StorySection title="Variants">
+        <SpecimenGrid
+          columns={3}
           states={[
             {
               id: "horizontal",
@@ -41,13 +61,6 @@ export const All: Story = {
                 </div>
               ),
             },
-          ]}
-        />
-      </StorySection>
-      <StorySection title="Variants">
-        <StateBoard
-          min={280}
-          states={[
             {
               id: "vertical",
               label: "Vertical",