feat(#221): 모바일 반응형 PR2 — 패널 1열 스택·칩 스트립·폼 (≤640px)#233
Merged
Conversation
…2·R1 패널 확장·핀 4종 RED 4건(G1/G9 채팅·프로젝트, G10 채팅 스트립, G10b complete 러너 프로젝트 스트립) 실발화 확인. R5 배너 e2e 는 계획 강등 경로 채택(핀+라이브 — 단절 하니스 재사용 과중). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CkNHx6UJ5U24PUbpnQycFp
.chat/.project-layout → 1fr + rows auto 1fr(암묵 auto 행의 본문 높이 붕괴 방지). .rooms 가로 스트립(비버튼 자식 flex:0 0 auto — 방 생성 입력 min-width·room-btn width 해제+max-width 캡). e2e 단언 2건은 스크롤 도달 계약으로 정정(scrollIntoViewIfNeeded — 폴드 아래/요약 스크롤 상태는 결함 아님). 모바일 e2e 12/12. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CkNHx6UJ5U24PUbpnQycFp
…2)·핀/단언 이중화 게이트 렌즈 P1: G8 주입이 칩 클릭 후 실행돼 .summary unmount 로 결정론적 무음 skip → 주입·측정을 클릭 이전으로 이동 + 부재 throw. P2: grid-template-rows auto 1fr 무핀 갭 → G9 핀 결합. 캐스케이드 렌즈 P2: .chat 160px 상수가 폰 safe-area additive 와 미정산(실기기 composer 폴드 아래·env=0 e2e blind) → max(0px, env-기본값) 차감 calc(env=0 이면 현행 동일). P3: .rooms .field width 140px 고정·overflowX computed 이중화·G10b 도달성 권위 주석·완주 대기 명시 timeout· line-item 인라인 drift 주석. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CkNHx6UJ5U24PUbpnQycFp
📝 WalkthroughWalkthrough모바일 채팅·프로젝트 패널을 1열 레이아웃과 가로 칩 스트립으로 변경하고, 안전 영역 높이와 폼 배치를 조정했다. CSS 회귀 테스트와 모바일·데스크톱 E2E 검증도 추가했다. Changes모바일 반응형 패널
Estimated code review effort: 3 (Moderate) | ~25 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.css`:
- Around line 1322-1324: Update the height calc() declaration in the stylesheet
so each subtraction operator is followed by its operand on the same line,
avoiding a newline immediately after “-” and satisfying the
scss/operator-no-newline-after Stylelint rule.
In `@src/renderer/styles.responsive.test.ts`:
- Around line 153-170: Extend the responsive stylesheet regression tests in the
existing describe block to assert that shell includes the safe-area height
calculation from the core change, covering both top and bottom safe-area insets.
Use a regex against shell that verifies the env(safe-area-inset-top) and
env(safe-area-inset-bottom) subtraction expressions, preserving the RED→GREEN
contract without relying on Playwright’s runtime env values.
🪄 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: 4f097955-2dfe-448b-bb92-592b26a52a98
📒 Files selected for processing (3)
e2e/mobile-responsive.web.e2e.tssrc/renderer/styles.csssrc/renderer/styles.responsive.test.ts
…캐폴딩 미커밋) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CkNHx6UJ5U24PUbpnQycFp
Owner
Author
|
@codex review |
|
Codex Review: Didn't find any major issues. Keep them coming! Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
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". |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
요약
#221 PR2/2 — 패널 3개(채팅·프로젝트·세션) + 폼 모바일 반응형. ≤640px 에서
.chat/.project-layout232px 사이드바 그리드를 1열 스택(rows auto 1fr) 으로, 룸/프로젝트 목록을 가로 칩 스트립(C2.modal-chips선례)으로 전환..grid-21열·.line-item랩·위저드 이후 잔여 폼 정돈.Closes #221 (PR1 = #232 머지
f46e785— 셸/전역/위저드·폰 실측 7/7).§6 무회귀: PR2 의 CSS diff 는 전부 신설 640px 블록 내부(미디어쿼리 밖 diff 0 — PR1 열거 예외조차 없음). 데스크톱 가드(641/1280)에
.chat/.project-layout232px 칼럼 computed 핀을 확장해 기계 검증.검증
test.fail()케이스 강제 활성화(G1/G9 — RED 실발화 확인 후 GREEN 전환) + 신설 하드 계약:.rooms오버플로 실존 선단언 → 실 가로 스크롤 → 마지막 칩 뷰포트내·클릭·활성 전이 + computedoverflow-x:auto이중화complete러너 서버(별도 수명주기)에서 런 3회 UI 완주 → 스트립 도달성 계약.src/main/e2e.ts시드·엔진 API 무변경.main오버플로 0(주입 부재=throw).summaryunmount 로 결정론적 vacuous → 순서 교정+무음 가드 제거) · P2 2(.chat160px 상수 × safe-area 미정산 →max(0px, env-기본값)차감 calc(env=0 데스크톱/에뮬 불변) / rows 무핀 → G9 결합 핀) · P3 6 반영품질 게이트 (AGENTS.md — 변경 후 필수)
npm run verifygreen (skills:lint·brain:check·format:check·typecheck·lint·test:coverage·build — coverage 는 비병렬 green·CI 권위)npm run dev재시작 확인 (해당 없음)npm run brain갱신 (PR2 는 src tsx 무변경 — brain:check green)리뷰
비고
.chat min-height 460px× 짧은 뷰포트(자체 리뷰 P3-1 — 계약 뷰포트 비발현)Summary by CodeRabbit
새로운 기능
버그 수정