style(storybook): refine foundation and navigation stories

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