fix(storybook): hide the SW Viewer Responsive 1920 row on narrow pages
Deploy Storybook / deploy (push) Successful in 54s
Deploy Storybook / deploy (push) Successful in 54s
This commit is contained in:
1 parent
860c301cd9
commit
71003c58c1
2 files changed
+6
-3
No files matched your search
@@ -6,7 +6,9 @@
|
||||
.sw-story-responsive { container-type: inline-size; }
|
||||
.sb-page:has(.sw-story-responsive) { container: sw-story-page / inline-size; }
|
||||
.sw-story-responsive-wide { width: 1920px; max-width: none; margin-inline: calc((100% - 1920px) / 2); }
|
||||
@container sw-story-page (max-width: 1999.98px) { .sw-story-responsive-wide { display: none; } }
|
||||
/* sw-story-responsive-hidden (2026-10-23, SW Viewer Responsive): the same hiding for a 1920 row that stays inside the
|
||||
Story column (no reach-out). */
|
||||
@container sw-story-page (max-width: 1999.98px) { :is(.sw-story-responsive-wide, .sw-story-responsive-hidden) { display: none; } }
|
||||
.sw-story-frame { background: #060606; }
|
||||
/* Shared drawing-area canvas of the SW Stories (2026-10-19): the SW/Viewer black grid — 40px cells, 1px lines of
|
||||
HM green #266651 at 18%, on #0A0A0B. Used behind the SW Header work area and dropdown room and the viewer frames. */
|
||||
|
||||
@@ -331,8 +331,9 @@ export const Responsive: Story = {
|
||||
<div className="sw-story-stack sw-story-responsive">
|
||||
{[1920, 1440, 1280, 950, 860, 760, 520].map(width => (
|
||||
// 2026-10-22 (user request): the 1920 row no longer reaches out of the content area (no sw-story-responsive-wide);
|
||||
// like the other rows it is a maximum inside the Story column.
|
||||
<div key={width}><StorySection title={`${width}px`}>
|
||||
// like the other rows it is a maximum inside the Story column. 2026-10-23: it is hidden on the same narrow pages
|
||||
// as the SW Header / Footer 1920 rows (sw-story-responsive-hidden, sw-stories.css), e.g. a 1920px screen.
|
||||
<div key={width} className={width === 1920 ? "sw-story-responsive-hidden" : undefined}><StorySection title={`${width}px`}>
|
||||
{/* 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 {...VIEWER_STORY_LOGO} documentTitle={demo.documentName} {...demo.fileProps} groups={demo.groups} trailing={demo.trailing} onCommand={demo.onCommand} /></div></div>
|
||||
</StorySection></div>
|
||||
|
||||
Reference in new issue
Block a user