[DONE] 폰에서 Pattern Lab 패널이 화면 폭 그대로 보인다

[patternflow-bot]

dev / https://claude.ai/code/session_0137CvqHMPfvYM6xXL1RN28P

폰 폭(800px 이하)에서 Pattern Lab 을 열면 Preview 가 위에 화면 폭 그대로 서고, 나머지 패널은 그 아래 한 무리의 탭이 돼요. 지금은 데스크톱 배치 그대로 세 칸으로 눌려 한 칸이 96~158px 이라 프레임 고르기가 「128 × 64 (Patter」로 잘리고 Knobs 의 입력이 칸 밖으로 나가요. 데스크톱 배치는 그대로예요.

좋아지는 것: 폰에서 Pattern Lab 패널이 화면 폭 그대로 보인다 — 글이 잘리지 않고 노브 입력이 칸 안에 든다

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR([DONE] Pattern Lab 에서 매트릭스 크기를 바꾼 뒤에도 픽셀 되돌리기가 그림을 지킨다 #96 [DONE] 링크를 메신저나 X 에 붙이면 쪽마다 제 제목과 그림이 뜬다 #97 [DONE] Pattern Lab 의 Del 이 그림이 든 레이어를 지우기 전에 한 번 묻는다 #98)의 대화 댓글, 리뷰, 줄 댓글 읽기: 셋 다 없어요
• 후보 4 고르기. dev 에서 아직 안 고쳐진 것을 390px 사진으로 봤어요(Preview 108px, Knobs 96px)
• 좁은 독 배치와 그 배치를 따로 저장하는 키
• registry.test.ts
• lint, typecheck, build, check:ci, check:voice
• 390, 1440 사진
• dev merge(이미 최신이었어요)
• GitHub 검사 초록: 0ebf108 에서 Drift checks, Web CI 둘 다 success

한 일

panels/registry.tsx 의 buildDefaultLayout 이 narrow 를 받아요. 좁으면 Preview 를 뿌리에 두고 Code 를 그 아래(below)에, 나머지 일곱 패널을 Code 무리 안(within)에 메뉴 차례로 넣어요. Code 가 첫 탭이에요. 메뉴 차례대로 두면 Layers 가 첫 탭인데, 374px 탭 줄이 앞에 선 Code 를 보이려고 Layers 를 왼쪽 밖으로 밀어냈어요. Preview 는 독 높이의 42% 예요. 2:1 프레임이 화면 폭으로 들어가고 그 위 줄이 남아요.

폭은 (max-width: 800px) 로 재요. 헤더가 두 줄로 접히는 폭(LabPanels.module.css)과 같아요. 독을 지을 때 한 번 묻고, Reset layout 을 누르면 그때 폭으로 다시 물어요.

좁게 지은 독은 배치를 새 키 patternflow_lab_layout_narrow_v1 에 저장해요(lib/lab/persist.ts). 태블릿은 세워서도 눕혀서도 열리니 폭마다 제 배치를 따로 지켜요. 폰이 지금까지 _layout_v1 에 써 둔 세 칸 배치는 좁은 폭에서 더 읽지 않아요. 그래서 이미 Lab 을 폰에서 연 사람도 다음에 열면 새 배치를 봐요.

새 panels/registry.test.ts 는 다섯 개예요. 좁은 배치의 무리와 탭 차례, Code 가 앞이고 Preview 가 제 높이를 받는 것, 넓은 배치가 등록부대로 놓이고 칸이 줄보다 먼저 갈리는 것, isNarrowDock 의 390·800·801·1440px, matchMedia 가 없는 브라우저.

증거

web/ 에서 돌린 각 출력의 끝줄이에요.

npm ci                            added 794 packages, and audited 795 packages in 35s
npm run lint -- --max-warnings=0  (출력 없이 0 으로 끝남)
npm run typecheck                 (출력 없이 0 으로 끝남)
npm run build                     ƒ  (Dynamic)  server-rendered on demand
npm run check:ci                  passed   virtual-panel   (exit 0, roadmap 만 skipped: gh 로그인 없음)
npm run check:voice               check:voice: nothing found

check:ci 안의 check:panels 는 Test Files 39 passed (39), Tests 519 passed (519) 이에요.

빌드한 사이트를 Chromium 으로 열어 독 무리를 읽었어요(x,y 폭×높이 [탭]).

390  전  8,113 108x474 [Preview] · 8,593 108x243 [Layers] · 122,113 158x723 [Code|Pixel|Gallery|Graphic Export|Director] · 286,113 96x416 [Knobs] · 286,535 96x301 [Color Ramp]
390  뒤  8,113 374x301 [Preview] · 8,420 374x416 [Code|Layers|Pixel|Gallery|Knobs|Color Ramp|Graphic Export|Director]
1440 전과 뒤 같음  423x538 [Preview] · 423x275 [Layers] · 651x819 [Code|…] · 338x472 [Knobs] · 338x341 [Color Ramp]

저장은 한 브라우저에서 차례로 봤어요. 1440 에서 Knobs 를 Code 무리로 끌어 옮기면 patternflow_lab_layout_v1 만 생겨요. 390 으로 다시 열면 좁은 배치가 나오고, 1440 으로 다시 열면 Knobs 가 Code 무리에 든 배치가 그대로 돌아와요. 390 에서 Reset layout 을 누르면 좁은 배치예요. 따로 390 에서 Gallery 를 닫으면 patternflow_lab_layout_narrow_v1 이 생기고, 다시 열어도 Gallery 없는 좁은 배치가 돌아와요. 그 브라우저로 1440 을 열면 넓은 기본 배치예요.

Code 편집기는 사진에서 「Loading...」에 머물러요. Monaco 가 CDN 에서 오는데 이 컨테이너의 브라우저가 거기 닿지 못해요. 고치기 전 사진도 같아요.

실행법

cd web
npm ci
npx vitest run src/app/pattern-lab/panels/registry.test.ts
npm run build && npx next start -p 3100

폰이나 브라우저 개발 도구의 390px 폭으로 http://localhost:3100/pattern-lab 을 열어요. 이미 이 브라우저에서 좁은 배치를 바꿨으면 Panels ▾ 의 Reset layout 이에요.

가정

• 경계는 800px 이에요. 헤더가 두 줄로 접히는 폭과 맞췄어요. 801px 이상은 지금 세 칸 그대로예요.
• 폰을 돌려 폭이 경계를 넘어도 독을 다시 짓지 않아요. 다시 지으면 열린 패널이 다 새로 올라와요. 지금 폭에 맞는 배치는 Reset layout 이 지어요. 그때까지 저장은 독을 지은 폭의 키로 가요.
• 폰이 _layout_v1 에 써 둔 세 칸 배치는 지우지 않았어요. 그 브라우저를 801px 이상으로 열면 그 배치가 되살아나요.
• 후보 표의 고칠 곳에 lab-dock.css 가 있었는데 고치지 않았어요. dockview 7 이 넘치는 탭을 「⌄ 4」 목록으로 이미 모아 줘서요.
• 앞 바퀴 「다음 바퀴」대로 순위 4 를 골랐어요.
• 표 밖: 390px 에서 Panels ▾ 와 Recent ▾ 메뉴가 독 위에 열린 채 남아요. 후보 9 가 이미 적은 일이에요.

Changelog

Web

• Pattern Lab stacks its panels on a phone. At 800px wide or less the default dock puts Preview across the top and every other panel as a full-width tab under it, where three columns left each panel about 110px. The narrow layout is saved under its own key, so a desktop arrangement survives a phone visit.

바퀴

바퀴 4 · 후보 4 「폰에서 Pattern Lab 패널이 한 칸씩 넓게 보인다」

다음 바퀴

• 5 「Pattern Lab 에서 휠로 확대할 때 패널이 함께 구르지 않는다」: 두 파일에 passive: false 리스너 하나씩이고, 같은 Lab 의 useTimelineZoom.ts 가 본이에요.
• 6 「첫 화면 영상이 움직임 줄이기를 켠 사람에겐 사진으로 나오고, 탭은 열린 탭을 화면 읽기 프로그램에도 알린다」: 포스터 그림이 이미 있고, 폰 단추의 aria-pressed 를 데스크톱 단추로 옮기면 돼요.
• 7 「가이드 끝의 「다음」 링크가 사이트 안 쪽은 다시 불러오지 않고 넘어가고, 밖으로 가는 링크만 ↗ 를 달고 새 탭에서 열린다」: BuildCards.tsx 의 Links 꼴을 가져오면 돼요.

https://claude.ai/code/session_0137CvqHMPfvYM6xXL1RN28P

---

Generated by Claude Code