Commit @e992bb2c12d414cae92af1eb0b6203617b2b8229

임동욱 08-18

fix: 모달에 가로 스크롤바가 생기던 문제

원인은 두 규칙이 부딪힌 것이었다.

- `.fox-modal`은 `max-block-size`와 짝으로 `overflow: auto`를 갖는다(내용이 길면 세로로
  스크롤하라는 뜻이다).
- `.fox-modal__close`는 테두리 위를 덮으려고 `inset-inline-end: -1px`로 일부러 1px 밖에 나간다.

절대 배치의 기준이 padding box라 그 1px이 넘침으로 계산되고, `overflow-x: auto`가 그것 하나
때문에 가로 스크롤바를 띄웠다(실측 client 398 → scroll 399).

세로만 스크롤하도록 축을 나눴다. 닫기 버튼은 배경도 테두리도 없고 아이콘이 8px 안쪽이라
x축을 잘라도 보이는 변화가 없다 — 시안이 의도한 "테두리를 덮는 배치"도 그대로 남는다.

검증 — 가로 스크롤바가 사라졌고(overflow-x: hidden), 세로는 그대로다(내용 880 / 박스 378에서
0 → 200 이동 확인). 닫기 아이콘은 오른쪽에서 32px 안쪽이라 잘리지 않는다.

Co-Authored-By: Claude Opus 5

@e992bb2c12d414cae92af1eb0b6203617b2b8229

Add a comment

Open 0
Closed 0

List

...	...	@@ -46,7 +46,12 @@
46	46	max-block-size: calc(100% - #{fox.padding(7)} * 2);
47	47	margin: auto;
48	48	padding: fox.modal(padding-default);
49		- overflow: auto;
	49	+ // 세로만 스크롤한다. `overflow: auto`로 두면 닫기 버튼이 테두리를 덮으려고 일부러 1px
	50	+ // 밖으로 나간 것(`__close`의 `inset-inline-end: -1px`)까지 넘침으로 세어 가로 스크롤바가
	51	+ // 생긴다 — 그 버튼은 배경도 테두리도 없고 아이콘이 8px 안쪽이라 x축을 잘라도 보이는 변화가
	52	+ // 없다.
	53	+ overflow-x: hidden;
	54	+ overflow-y: auto;
50	55	border: fox.border(1) solid fox.color(border-neutral-subtle);
51	56	border-radius: fox.card(radius-xlg);
52	57	background: fox.color(surface-neutral-default);

Delete comment