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

refactor(storybook): consolidate property panel comparison layout

Browse Source 
Keep sw-header--property-panel-compare as the single property panel state
page: the four existing SWHeaderPropertyPanel states in 2 columns x 2 rows
at their original size, inside a scrolling Inner. Remove the duplicate
Property Panel Variants and the four single-state Stories (SW 24 -> 19).
Storybook-only change; SW runtime and public API untouched.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
shkim4andClaude Opus 5.5 committed 2026-10-19 12:52:29 +09:00
1 parent c705a1fc59
commit c8e5fbeebc
82 files changed
+12318 -49
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/sw/sw-stories.css
+11
View File
@@ -45,6 +45,17 @@
.sw-story-compare { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.sw-story-compare__cell { margin: 0; }
.sw-story-compare__cell figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 12px; color: #3d4a45; }
/* Property panel 4-state comparison (2026-10-19): 2 columns × 2 rows at the panels' own size inside a
viewport-high page. Only the Inner scroller scrolls (both axes); panels are never shrunk or wrapped. */
.sw-story-compare-page.sb-page { height: 100dvh; min-height: 0; }
.sw-story-compare-page > .sb-page-inner { height: 100%; display: flex; flex-direction: column; }
.sw-story-compare-page .sb-page-header { flex: 0 0 auto; }
.sw-story-compare-page .sw-story-log { flex: 0 0 auto; margin-top: 12px; }
.sw-story-compare-scroll { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.sw-story-compare.sw-story-compare--grid { display: grid; grid-template-columns: repeat(2, max-content); align-items: start; gap: 24px; width: max-content; }
/* Placement-only exception, same as the Overview Stage: the product clamps a panel to the viewport
height; here the scroller provides the room so the 754px panel keeps its size. */
.sw-story-compare--grid .hm-sw-property { max-height: none; }
.sw-story-detail-comparison { overflow-x: auto; padding: 16px; background: var(--hm-sw-header-layer-menu-background); }
.sw-story-detail-row { display: grid; grid-template-columns: 140px repeat(4, 180px); align-items: center; gap: 16px; min-width: 924px; padding: 12px 0; }
.sw-story-detail-row > div { display: flex; align-items: center; gap: 8px; }