fix(mobile): 아이폰 반응형 — 안전영역·푸터·키보드 힌트 - #62
Conversation
Capacitor 네이티브 셸은 display-mode standalone이 아니라 안전영역 패딩이 빠져 헤더가 노치/상태바와 겹치던 문제를 body 상시 적용으로 수정하고(데스크톱은 env()=0이라 무해), 패딩 영역 배경을 앱 다크 톤과 일치. FooterHelp는 좁은 화면에서 팁 텍스트가 1글자 폭으로 세로 붕괴하고 터치 기기에 키보드 단축키(DFJK/Ctrl+Z)가 노출되던 것을 md 브레이크포인트로 분리 — 모바일은 탭 안내 한 줄만. 데스크톱 표시는 무변경(e2e 영향 없음). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 46f5a2432c
ℹ️ 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".
| padding-top: env(safe-area-inset-top); | ||
| padding-right: env(safe-area-inset-right); | ||
| padding-bottom: env(safe-area-inset-bottom); | ||
| padding-left: env(safe-area-inset-left); |
There was a problem hiding this comment.
In iOS/Capacitor/PWA contexts where env(safe-area-inset-*) is non-zero, applying this padding to body does not reduce the h-screen app height (src/App.jsx:676): the root still lays out as 100vh after the top padding and before the bottom padding, making the document taller than the viewport and leaving the footer/home controls below or inside the unsafe area unless the page scrolls. Move the insets into the app container or subtract them from the app height so the fixed-height flex column actually fits within the safe area.
Useful? React with 👍 / 👎.
2 participants
요약
사용자 피드백("아이폰에서 반응형 적용이 제대로 안 된 것 같다") — 시뮬레이터(iPhone 17 Pro) 스크린샷으로 확인된 3가지 수정:
display-mode: standalone(PWA)에만 적용되어 Capacitor 웹뷰(browser 모드)에서 헤더가 시계와 겹침 → body 상시 적용으로 변경(데스크톱은 env()=0), 패딩 영역 배경을 bg-gray-950으로 일치.hidden md:flex.검증
경계
src/index.css+FooterHelp.jsx만 수정.🤖 Generated with Claude Code