diff --git a/src/sw/sw-header.stories.tsx b/src/sw/sw-header.stories.tsx
index b40d69b..cb4169b 100644
--- a/src/sw/sw-header.stories.tsx
+++ b/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>
diff --git a/src/sw/sw-viewer.stories.tsx b/src/sw/sw-viewer.stories.tsx
index a493055..2a5a3b7 100644
--- a/src/sw/sw-viewer.stories.tsx
+++ b/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>