style(storybook): unify page hierarchy and compact layouts

src/chart/line-chart.stories.tsx

@@ -7,7 +7,7 @@ import {
   LineStraightColorLabelExample,
   LineStraightExample,
 } 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 six examples share one data set and axis range, so connection styles compare directly: curve, straight
 // and step, each as a plain line (left) and with Dots and value labels (right).
@@ -25,7 +25,7 @@ export const Line: Story = {
       <StoryPageHeader title="Line Chart" />
       {/* Same grid as Bar Chart: two per row from 1024px, one below. Source order is the mobile order; desktop reads row by row:
           Curve | Curve + labels, Straight | Straight + colored labels, Step | Step + labels. */}
-      <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">
+      <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="Curve">
           <LineCurveExample />
         </StorySection>
@@ -44,7 +44,7 @@ export const Line: Story = {
         <StorySection title="Step · Dot + Label">
           <LineStepDotLabelExample />
         </StorySection>
-      </div>
+      </StorySectionGrid>
     </StoryPage>
   ),
 }