style(storybook): unify page hierarchy and compact layouts

src/chart/radar-chart.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { RadarCustomLabelExample, RadarDotExample, RadarLinesOnlyExample, RadarPlainExample } from "@hm-design/chart/examples"
-import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
 
 // Sample data only. All radars share one data set (six axes, two series) and the 0-100 axis range.
 const meta = {
@@ -16,20 +16,20 @@ export const Radar: Story = {
     <StoryPage>
       <StoryPageHeader title="Radar Chart" />
       {/* Same grid as the other Chart pages: two per row from 1024px, one below. */}
-      <div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
-        <StorySection title="Radar">
+      <StorySectionGrid className="grid-cols-1 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
+        <StorySection title="Basic">
           <RadarPlainExample />
         </StorySection>
-        <StorySection title="Radar + Dot">
+        <StorySection title="Dot">
           <RadarDotExample />
         </StorySection>
-        <StorySection title="Radar + Lines Only">
+        <StorySection title="Lines Only">
           <RadarLinesOnlyExample />
         </StorySection>
-        <StorySection title="Radar + Custom Label">
+        <StorySection title="Custom Label">
           <RadarCustomLabelExample />
         </StorySection>
-      </div>
+      </StorySectionGrid>
     </StoryPage>
   ),
 }