style(storybook): unify page hierarchy and compact layouts

src/chart/bar-chart.stories.tsx

@@ -5,7 +5,7 @@ import {
   SignedBarChartExample,
   StackedBarChartExample,
 } from "@hm-design/chart/examples"
-import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
 
 // shadcn/ui Chart (Recharts) with HM tokens, from the public @hm-design/chart entries. All values are sample data.
 // Narrow widths: use the toolbar Viewport presets (HM Mobile · 390). The chart is fluid.
@@ -24,7 +24,7 @@ export const Bar: Story = {
       {/* Two sections per row from 1024px (HM desktop boundary), one below. Source order is the mobile order; on desktop it reads
           row by row: Grouped | Horizontal, then Stacked | Positive / Negative. On desktop every row has the same height and each
           card fills its section, so card tops, bottoms and chart areas line up. */}
-      <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="Grouped">
           <BarChartExample />
         </StorySection>
@@ -37,7 +37,7 @@ export const Bar: Story = {
         <StorySection title="Positive / Negative">
           <SignedBarChartExample />
         </StorySection>
-      </div>
+      </StorySectionGrid>
     </StoryPage>
   ),
 }