feat(sw): viewer header keeps every menu down to 520px
Deploy Storybook / deploy (push) Successful in 1m16s

- File name: clamp(80px, min(45cqw - 256px, 100cqw - 780px), 360px),
  56px below 560px; 1280px and wider unchanged
- Model / Layout tabs narrow (name, then count ellipsized) down to the new
  --hm-sw-viewer-tabs-min-width (48px) before anything moves into More;
  the measurement counts them at that minimum once every icon step applies
- Switch items get an optional shortLabel shown below 560px (어두운 배경 ->
  배경); counts hidden there
- More appears only below about 520px; viewer test and AI guides updated
This commit is contained in:
shkim4 committed 2026-10-26 20:00:50 +09:00
1 parent 7976801034
commit cabd2f67de
8 files changed
+83 -34

No files matched your search

+4 -1
View File
@@ -70,15 +70,18 @@ export function useViewerDemo({ initialDocument = null as string | null, initial
const groups = useMemo<SWViewerHeaderGroup[]>(() => [
{
id: "space", label: "도면 공간", surface: "field", hidden: !loaded, items: [
// 2026-10-26 (user request): the tabs first narrow with an ellipsis (down to --hm-sw-viewer-tabs-min-width); only
// a header too narrow even then (below about 520px) moves the collapseBelow items into More.
{ type: "tabs", id: "space", label: "모델과 배치 선택", moreLabel: "도면 공간", collapseBelow: 1180, value: space, options: SPACES, onValueChange: setSpace },
],
},
{
id: "view", label: "화면 보기", surface: "field", items: [
// 2026-10-21: shown while the header has room, icon only next, then into More (measured, see SWViewerHeader).
// 2026-10-26: into More only below about 520px (after the tabs narrowed); 어두운 배경 shows 배경 in a narrow header.
{ type: "button", id: "fit", label: "전체 보기", icon: <Scan />, title: "전체 도면 맞춤 (F)", iconOnlyBelow: 560, collapseBelow: 1180, disabled: !loaded },
{ type: "switch", id: "2.5d", label: "2.5D", checked: is25D, collapseBelow: 1180, onCheckedChange: set25D },
{ type: "switch", id: "dark", label: "어두운 배경", checked: dark, collapseBelow: 1180, onCheckedChange: setDark },
{ type: "switch", id: "dark", label: "어두운 배경", shortLabel: "배경", checked: dark, collapseBelow: 1180, onCheckedChange: setDark },
],
},
{