fix(helper): 학습 도우미 가로 스크롤 제거 + 아이폰 사파리 대응
All checks were successful
CI / backend-test (push) Successful in 1m27s
CI / frontend-build (push) Successful in 46s
CI / backend-dep-scan (push) Successful in 5s

- 긴 코드 줄이 패널을 넘어 가로 스크롤 생기던 것 → overflow-wrap: anywhere
- 사파리 100vh(주소창 포함) 문제 → 100dvh로, 미지원은 vh 폴백
- 아이폰 홈바만큼 띄우기 → env(safe-area-inset-bottom)
This commit is contained in:
AWESOMEDEV 2026-07-23 13:26:38 +09:00
parent 4a7e75f92d
commit c813b99ea3

View File

@ -1481,7 +1481,7 @@ inline-code, .icode {
.helper-fab { .helper-fab {
position: fixed; position: fixed;
right: 24px; right: 24px;
bottom: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); /* 아이폰 홈바 위로 */
width: 56px; width: 56px;
height: 56px; height: 56px;
border-radius: 50%; border-radius: 50%;
@ -1500,11 +1500,15 @@ inline-code, .icode {
.helper-panel { .helper-panel {
position: fixed; position: fixed;
right: 24px; right: 24px;
bottom: 92px; /* 아이폰 홈바(safe-area)만큼 띄운다. env 미지원 브라우저는 fallback 0. */
bottom: calc(92px + env(safe-area-inset-bottom, 0px));
width: 360px; width: 360px;
max-width: calc(100vw - 32px); max-width: calc(100vw - 32px);
height: 480px; height: 480px;
/* 사파리는 100vh에 주소창 높이가 포함돼 패널이 화면 밖으로 밀린다.
dvh(동적 뷰포트) 실제 보이는 높이라 사파리에서 정확하다. 미지원 브라우저는 vh로 폴백. */
max-height: calc(100vh - 140px); max-height: calc(100vh - 140px);
max-height: calc(100dvh - 140px);
background: var(--bg); background: var(--bg);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 16px; border-radius: 16px;
@ -1531,7 +1535,9 @@ inline-code, .icode {
} }
.helper-body { .helper-body {
flex: 1; flex: 1;
min-height: 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; /* 가로 스크롤 차단 */
padding: 14px 16px; padding: 14px 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1548,6 +1554,8 @@ inline-code, .icode {
font-size: 14px; font-size: 14px;
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
overflow-wrap: anywhere; /* 긴 코드 줄이 패널을 넘어 가로 스크롤을 만드는 것 방지 */
min-width: 0;
max-width: 85%; max-width: 85%;
} }
.helper-user { .helper-user {