feat(#221): 모바일 반응형 PR1 — 전역 레이어·앱 셸·위저드 (≤640px)

[pdw96]

요약

#221 PR1/2 — 모바일 반응형 전역 레이어 + 앱 셸 + 위저드. 폰 브라우저(≤640px)에서 셸(topbar·내비·main·footer)·타이포·터치 타깃·폼·AddAiWizard 가 가로 스크롤 없이 조작 가능해진다. 데스크톱(>640px) 무회귀가 계약: 모든 폰 분기는 신설 @media (max-width: 640px) 블록 안, 미디어쿼리 밖 diff 는 아래 열거 예외뿐.

Part of #221 (PR2 = 패널 3개+폼이 Closes #221). 스펙 r3·계획 r3 = 이슈 체크포인트 1·2 (Codex clean ×2).

§6 열거 예외 — 미디어쿼리 밖 diff 의 데스크톱 no-op 근거

예외	데스크톱 no-op 근거
.app·.chat 100vh→vh;dvh 병기	데스크톱은 수축 UA 크롬이 없어 dvh≡vh(값 동일·후행 승리)
viewport meta viewport-fit=cover·interactive-widget=resizes-content	데스크톱 크로뮴/Electron 은 viewport meta 를 레이아웃에 미반영
safe-area additive(.topbar·.footer·.update-banner·.modal-actions)	max(기존값, env)/calc(기존값+env) — env=0(데스크톱)이면 기존값. 구선언 병기로 env 미지원 파서도 폴백. e2e 데스크톱 가드가 4변 padding 을 computed 핀
.summary overflow-wrap: break-word	예외가 아니라 전 뷰포트 결함 수정(긴 무공백 토큰이 패널을 뚫는 버그)
.modal-actions padding-bottom max(0px, env)	env=0 이면 0 = 종전 기하 불변 — approval-hold e2e 절대값 단언 4/4 green 으로 실증

검증

• 신설 게이트: src/renderer/styles.responsive.test.ts(계약 핀 11 — additive 선언단위 검사·셀렉터 결합 핀·주석 스트립 파서) + e2e/mobile-responsive.web.e2e.ts(390×844·360×740 폰 + 641×900/1280×800 데스크톱 무회귀 가드 + PR2 활성화 예정 케이스는 test.fail() 기계 선언)
• TDD: 판정기 선행(구현 0줄 RED 실발화로 단언 정직성 증명) — RED 정직성 메타규칙 1회 발동: 채팅 탭은 232px 그리드에서도 .main 오버플로가 없어(짜부라짐) 오버플로 단언이 blind → 1열 스택 computed 단언으로 교체
• 자체 적대 리뷰 3렌즈(§6 diff 규율·게이트 실효성·ripple): P1 0 · P2 4(전부 반영 — C2 타이포 캐스케이드 누출 차단 :not(.modal-card *)·safe-area 병기·16px 셀렉터 결합 핀·데스크톱 가드 확장) · P3 다수 반영
• win 로컬 병렬 vitest flake 2건은 개별/--no-file-parallelism 실행 green(기존 기록 패턴·권위=CI)

품질 게이트 (AGENTS.md — 변경 후 필수)

• npm run verify green (skills:lint·brain:check·format:check·typecheck·lint·test·build 집계 = 로컬 == CI)
• preload/IPC 변경 시 npm run dev 재시작 확인 (해당 없음 — preload/IPC 무변경)
• 코어 코드 변경 시 npm run brain 갱신 (verify 의 brain:check 가 강제)

리뷰

• Codex 봇 자동리뷰 대기 · 반영 (라이브러리·API·SDK·CLI·모델 지적은 context7 로 현행 문서 교차검증)

비고

• e2e 전량: electron+web 25 passed·1 skipped(drain win32 — 기존 관례)
• 라이브 폰 실측 ✅ 완료(2026-07-14) — 실 CF Access 터널·브랜치 빌드 재배포 후 실측. 기기: Galaxy Z Flip6 · Chrome 150.0.7871.114 (Android). 체크리스트 7/7 통과:
  ① 3탭 가로 스크롤 없음·탭 전환 정상 ② dvh — 주소창 미수축 구조(내부 스크롤·설계 정합) 확인 ③ 위저드 API 키 입력 포커스 시 자동 줌 미발생·터치 타깃 양호 ④ 재접속 배너 화면 폭 안 정상 ⑤ 상태바/홈 인디케이터 겹침 없음(safe-area) ⑥ C2 승인 바텀시트 무회귀(viewport-fit=cover 도입 후 버튼 가림 없음 — MCP 적용 승인 유발 실측) ⑦ 스크롤 버벅임 없음·타이포 가독 양호
• eslint ignores 에 deploy/workspace/** 추가 — 라이브 하니스 워크스페이스(gitignore)가 로컬 verify 만 깨는 로컬↔CI 비대칭 해소(추적파일 금지 계약 주석 포함)

Summary by CodeRabbit

• 새 기능
  • 모바일 화면에서 가로 스크롤을 줄이고, 레이아웃·탭·폼·마법사 UI가 작은 화면에 맞게 표시됩니다.
  • 노치와 홈바 안전 영역, 소프트 키보드, 동적 화면 높이를 지원합니다.
  • 긴 URL과 텍스트가 레이아웃을 깨뜨리지 않도록 개선했습니다.
• 버그 수정
  • 모바일 터치 영역과 폼 글꼴 크기를 조정해 조작성과 입력 경험을 개선했습니다.
• 테스트
  • 모바일·데스크톱 반응형 동작과 주요 시각적 회귀 검증을 추가했습니다.
• 문서
  • 반응형 설계 및 구현 계획 문서를 추가했습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

웹 렌더러에 모바일 뷰포트 메타데이터, dvh·safe-area 기반 스타일, 640px 이하 반응형 규칙, 위저드 래퍼를 추가하고 Vitest·Playwright 회귀 검증을 도입했다. 관련 설계·실행 계획 문서와 ESLint 제외 경로도 갱신했다.

Changes

웹모드 모바일 반응형

Layer / File(s)	Summary
반응형 계약과 실행 계획 docs/superpowers/..., brain.md	모바일 반응형의 설계·계약·실행 단계와 검증 절차를 문서화하고 brain 메타데이터를 갱신한다.
뷰포트와 전역 모바일 스타일 src/renderer/index.html, src/renderer/styles.css	viewport 메타데이터, dvh, safe-area 보정, 640px 이하 레이아웃, 타이포그래피, 폼 및 터치 타깃 규칙을 추가한다.
위저드 연결과 컴포넌트 회귀 가드 src/renderer/components/SessionsPanel.tsx, src/renderer/components/SessionsPanel.test.tsx, src/renderer/components/ApprovalModal.test.tsx	AddAiWizard를 .wizard 래퍼에 마운트하고 승인 모달의 모바일 CSS 검증 범위를 세분화한다.
CSS·HTML 계약 테스트 src/renderer/styles.responsive.test.ts	모바일 미디어쿼리, 안전영역, viewport 메타, 폼 글꼴, 터치 타깃, 감속 모션 규칙을 문자열 기반으로 검증한다.
모바일 E2E와 데스크톱 회귀 검증 e2e/mobile-responsive.web.e2e.ts, eslint.config.mjs	모바일 오버플로·탭·터치 타깃·폼 크기와 데스크톱 계산 스타일을 Playwright로 검증하고 로컬 워크스페이스를 ESLint에서 제외한다.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant RendererIndexHTML
  participant RendererStylesCSS
  participant Playwright
  Browser->>RendererIndexHTML: 모바일 viewport 메타 로드
  Browser->>RendererStylesCSS: dvh·safe-area·640px 규칙 적용
  Playwright->>Browser: 모바일 또는 데스크톱 뷰포트로 앱 실행
  Browser-->>Playwright: 오버플로·스타일·터치 타깃 측정값 반환

Loading

Possibly related PRs

• pdw96/fleet#134: eslint.config.mjs의 전역 ignores 경로를 조정한다는 점에서 연결된다.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	전역 모바일 스타일, 뷰포트/safe-area, AddAiWizard 래핑, 회귀 테스트와 E2E가 #221의 PR1 범위를 충족합니다.
Out of Scope Changes check	✅ Passed	문서, 테스트, ESLint ignore, brain 메타 갱신은 모바일 반응형 구현과 검증을 돕는 범위 내 변경입니다.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 #221의 1단계 모바일 반응형 작업과 전역 레이어·앱 셸·위저드 변경을 정확히 요약합니다.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/issue221-mobile-responsive

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/renderer/styles.responsive.test.ts`:
- Around line 65-74: Update the safe-area declaration validation in the G6② test
so every env(safe-area-inset-*) occurrence is individually verified to be inside
a max() or calc() expression, rather than allowing one valid occurrence to mask
another. Preserve the existing declaration-count and standalone-substitution
checks while iterating over each matched env occurrence in the test.
- Around line 126-128: 반응형 회귀 테스트가 넓은 검색으로 삭제된 계약을 놓치지 않도록 각 대상 선택자와 실제 요소를 직접
검증하세요. src/renderer/styles.responsive.test.ts 126-128의 테스트는 .wizard input/select
폭과 button/label의 44px 선언을 각각 확인하도록 수정하세요.
src/renderer/components/ApprovalModal.test.tsx 695-702에서는 .modal-actions,
.modal-card, reduced-motion 규칙을 각각 검증하세요. e2e/mobile-responsive.web.e2e.ts
154-169는 locator를 .wizard button:not([class])로 제한하고, 177-188의 중복 .field 표본은
.wizard의 bare 폼 컨트롤 검증으로 교체하세요.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ce89cacb-b337-4ce5-b116-a2302d503790

📥 Commits

Reviewing files that changed from the base of the PR and between d09addb and e042219.

📒 Files selected for processing (11)

• brain.md
• docs/superpowers/plans/2026-07-13-issue221-mobile-responsive-plan.md
• docs/superpowers/specs/2026-07-13-issue221-mobile-responsive-design.md
• e2e/mobile-responsive.web.e2e.ts
• eslint.config.mjs
• src/renderer/components/ApprovalModal.test.tsx
• src/renderer/components/SessionsPanel.test.tsx
• src/renderer/components/SessionsPanel.tsx
• src/renderer/index.html
• src/renderer/styles.css
• src/renderer/styles.responsive.test.ts

[pdw96]

@codex review

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 65e77d20ae

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[pdw96]

@codex review

[chatgpt-codex-connector]

Codex Review: Didn't find any major issues. Bravo.

Reviewed commit: ef039a7ba2

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".