style(storybook): refine overlay story layout

src/components/tooltip.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@hm-design/ui"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // Tooltip is a Radix overlay (Portal) with short, non-interactive text. The representative Story shows real triggers
@@ -20,20 +21,16 @@ function Basic({ defaultOpen }: { defaultOpen?: boolean }) {
   )
 }
 
-function Placements() {
+function Placement({ side }: { side: "top" | "right" | "bottom" | "left" }) {
   return (
-    <div className="flex flex-wrap gap-3">
-      {(["top", "right", "bottom", "left"] as const).map((side) => (
-        <Tooltip key={side}>
-          <TooltipTrigger asChild>
-            <Button variant="primary" appearance="outline" size="sm">
-              {side}
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side={side}>{`side="${side}"`}</TooltipContent>
-        </Tooltip>
-      ))}
-    </div>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="primary" appearance="outline" size="sm">
+          {side}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side={side}>{`side="${side}"`}</TooltipContent>
+    </Tooltip>
   )
 }
 
@@ -70,6 +67,21 @@ const meta = { title: "Components/Overlay/Tooltip", component: Tooltip, paramete
 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
+// (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 is merged into Variants (Basic is its first item, then the four sides): 5 columns on PC.
 export const All: Story = {
   name: "Tooltip",
   parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -77,17 +89,26 @@ export const All: Story = {
     <TooltipProvider>
       <StoryPage>
         <StoryPageHeader title="Tooltip" />
-        <StorySection title="Overview">
-          <Basic />
-        </StorySection>
         <StorySection title="Variants">
-          <Placements />
+          <SpecimenGrid
+            columns={5}
+            states={[
+              { id: "basic", label: "Basic", children: <Basic /> },
+              { id: "top", label: "Top", children: <Placement side="top" /> },
+              { id: "right", label: "Right", children: <Placement side="right" /> },
+              { id: "bottom", label: "Bottom", children: <Placement side="bottom" /> },
+              { id: "left", label: "Left", children: <Placement side="left" /> },
+            ]}
+          />
         </StorySection>
         <StorySection title="Usage">
-          <div className="flex flex-wrap gap-3">
-            <LongText />
-            <Disabled />
-          </div>
+          <SpecimenGrid
+            columns={5}
+            states={[
+              { id: "long-text", label: "Long Text", children: <LongText /> },
+              { id: "disabled", label: "Disabled", children: <Disabled /> },
+            ]}
+          />
         </StorySection>
       </StoryPage>
     </TooltipProvider>