From ccafc6e332aeaf963b1d85d5a389b95432795648 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= <shkim4@samaneng.com>
Date: Thu, 22 Oct 2026 19:11:19 +0900
Subject: [PATCH] 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 | 14 +++++++++-----
 src/sw/sw-viewer.stories.tsx |  3 ++-
 2 files changed, 11 insertions(+), 6 deletions(-)

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>