docs(storybook): fit SW Responsive More rows to the screen

SW Header Responsive More: MenuFrame gains a fluid option. The row width caps the
scroller that paints the black grid and the frame fills it, so grid and header
share one width and shrink together (no grid left beside the header).
SW Viewer Responsive More: each row width is a maximum instead of a fixed width.
The 1920 row is 1536px at a 1920px screen (80vw inner); integrated-visual
baselines differ by this intended layout change and are not updated.

src/sw/sw-header.stories.tsx

@@ -495,11 +495,15 @@ const documentCallbacks = {
   onDocumentOpen: () => console.info("[SWHeader] documentOpen"),
 }
 
-/** Frame with room below the header so the overlay dropdown is not clipped by the story scroller. */
-function MenuFrame({ width, children, fixedDimension = false }: { width: number; children: ReactNode; fixedDimension?: boolean }) {
+/**
+ * Frame with room below the header so the overlay dropdown is not clipped by the story scroller.
+ * `fluid` (2026-10-22): `width` is a maximum for the scroller that paints the black grid, and the frame fills it, so the
+ * grid and the header share one width and shrink together on a narrower screen (no grid left beside the header).
+ */
+function MenuFrame({ width, children, fixedDimension = false, fluid = false }: { width: number; children: ReactNode; fixedDimension?: boolean; fluid?: boolean }) {
   return (
-    <div className={`sw-story-scroller sw-story-scroller--menu${fixedDimension ? " sw-story-fixed-dimension" : ""}`}>
-      <div className="sw-story-frame" style={{ width }} data-frame-width={width}>{children}</div>
+    <div className={`sw-story-scroller sw-story-scroller--menu${fixedDimension ? " sw-story-fixed-dimension" : ""}`} style={fluid ? { maxWidth: `min(100%, ${width}px)` } : undefined}>
+      <div className="sw-story-frame" style={fluid ? undefined : { width }} data-frame-width={width}>{children}</div>
     </div>
   )
 }
@@ -787,7 +791,7 @@ export const ResponsiveMore: Story = {
       <StoryPageHeader title="SW Header — 화면 너비" />
       {MORE_WIDTHS.map(width => (
         <StorySection key={width} title={`${width}px`}>
-          <MenuFrame width={width}><StyleHeader /></MenuFrame>
+          <MenuFrame width={width} fluid><StyleHeader /></MenuFrame>
         </StorySection>
       ))}
     </StoryPage>

src/sw/sw-viewer.stories.tsx

@@ -338,7 +338,8 @@ export const Responsive: Story = {
         <div className="sw-story-stack">
           {[1920, 1440, 1280, 950, 860, 760, 520].map(width => (
             <StorySection key={width} title={`${width}px`}>
-              <div className="sw-story-scroller sw-viewer-story-menu-row"><div style={{ width }} data-width={width}><SWViewerHeader documentTitle={demo.documentName} {...demo.fileProps} groups={demo.groups} trailing={demo.trailing} onCommand={demo.onCommand} /></div></div>
+              {/* The row width is a maximum (2026-10-22): on a narrower screen the header shrinks with it instead of scrolling. */}
+              <div className="sw-story-scroller sw-viewer-story-menu-row"><div style={{ width: "100%", maxWidth: width }} data-width={width}><SWViewerHeader documentTitle={demo.documentName} {...demo.fileProps} groups={demo.groups} trailing={demo.trailing} onCommand={demo.onCommand} /></div></div>
             </StorySection>
           ))}
         </div>