style(storybook): refine data display story layout

src/components/progress.stories.tsx

@@ -49,20 +49,44 @@ const meta = { title: "Components/Data & Display/Progress", component: Progress,
 export default meta
 type Story = StoryObj<typeof meta>
 
-const board = (...ids: string[]) => (
-  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
-)
+// 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({ ids, columns, spans = {} }: { ids: string[]; columns: 2 | 3 | 4; spans?: Record<string, 2> }) {
+  return (
+    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] ${specimenColumns[columns]}`}>
+      {ids.map((id) => {
+        const s = sections.find((section) => section.id === id)!
+        return (
+          <div key={id} className={spans[id] ? "min-[1000px]:col-span-2" : undefined}>
+            <StateBoard min={10000} states={[{ id: s.id, label: s.label, children: s.node }]} />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
 
 // Representative Story: the common Story page; the sections group the same specimens.
+// Representative Story: Overview (50%) is merged into States (0%, 50%, 100%); max = 200 and Interactive stay under Usage. 3 columns on PC.
 export const All: Story = {
   name: "Progress",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Progress" />
-      <StorySection title="Overview">{board("middle")}</StorySection>
-      <StorySection title="States">{board("zero", "full")}</StorySection>
-      <StorySection title="Usage">{board("custom-maximum", "interactive")}</StorySection>
+      <StorySection title="States">
+        <SpecimenGrid ids={["zero", "middle", "full"]} columns={3} />
+      </StorySection>
+      <StorySection title="Usage">
+        <SpecimenGrid ids={["custom-maximum", "interactive"]} columns={3} />
+      </StorySection>
     </StoryPage>
   ),
 }