style(storybook): refine overlay story layout

src/components/alert-dialog.stories.tsx

@@ -11,6 +11,7 @@ import {
   AlertDialogTrigger,
   Button,
 } from "@hm-design/ui"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // Alert Dialog is a modal Radix overlay (Portal) for a decision that must be confirmed or cancelled: no Close (X), no outside
@@ -68,17 +69,34 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 // Representative Story: the common Story page; each trigger opens the real dialog.
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), fewer below that
+// (200px 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. The trigger keeps its
+// own size (the wrapper div stretches, the inline-flex trigger does not). Overlays open in a portal, so this layout never affects them.
+function SpecimenGrid({ states, columns = 4 }: { states: BoardState[]; columns?: 4 | 5 }) {
+  return (
+    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))] ${columns === 5 ? "min-[1000px]:grid-cols-5" : "min-[1000px]:grid-cols-4"}`}>
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[{ ...state, children: <div>{state.children}</div> }]} />
+      ))}
+    </div>
+  )
+}
+
+// Representative Story: Overview and Variants are merged into one Variants section.
 export const All: Story = {
   name: "Alert Dialog",
   parameters: { layout: "fullscreen", controls: { disable: true } },
   render: () => (
     <StoryPage>
       <StoryPageHeader title="Alert Dialog" />
-      <StorySection title="Overview">
-        <Confirmation />
-      </StorySection>
       <StorySection title="Variants">
-        <Destructive />
+        <SpecimenGrid
+          states={[
+            { id: "confirmation", label: "Confirmation", children: <Confirmation /> },
+            { id: "destructive", label: "Destructive", children: <Destructive /> },
+          ]}
+        />
       </StorySection>
     </StoryPage>
   ),