fix(helper): 학습 도우미 가로 스크롤 제거 + 아이폰 사파리 대응
- 긴 코드 줄이 패널을 넘어 가로 스크롤 생기던 것 → overflow-wrap: anywhere - 사파리 100vh(주소창 포함) 문제 → 100dvh로, 미지원은 vh 폴백 - 아이폰 홈바만큼 띄우기 → env(safe-area-inset-bottom)
This commit is contained in:
parent
4a7e75f92d
commit
c813b99ea3
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user