shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

fix(storybook): refine responsive page inner width

Browse Source 
- Story page Inner side margin: 16px up to a 480px viewport, linear to 60px at 768px, 60px beyond (no width jump)
- Follow the 60px margins: Responsive 1920 row from a 2040px page (was 2000px); property compare 3 columns from 1125px, 2 columns from 787px (was 1080 / 720)
- SW browser tests: drop the removed --sb-page-max-width override, compare thresholds 787 / 1125
This commit is contained in:
shkim4 committed 2026-11-05 15:59:41 +09:00
1 parent 22841affaf
commit 6c61edadc1
9 files changed
+29 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/sw/sw-footer-stories.css
+1 -1
View File
@@ -32,7 +32,7 @@
.sw-footer-story-inline { display: inline-flex; flex-direction: column; padding: 0; }
.sw-footer-story-width + .sw-footer-story-width { margin-top: 16px; }
/* The hidden 1920px row (Responsive More, narrower than 1920px) takes its gap with it. */
@container sw-story-page (max-width: 1999.98px) { .sw-story-responsive-hidden + .sw-footer-story-width { margin-top: 0; } }
@container sw-story-page (max-width: 2039.98px) { .sw-story-responsive-hidden + .sw-footer-story-width { margin-top: 0; } }
.sw-footer-story-aux-compare { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 16px; }
.sw-footer-story-aux-row { display: flex; align-items: center; gap: 12px; margin: 0; }
.sw-footer-story-aux-row figcaption { flex: 0 0 120px; font-size: 12px; color: #3d4a45; }