패널 스크롤 버그#68
Merged
Merged
Conversation
flex column 자식이 'flex: 1; overflow-y: auto;'로 정의되어 있어도 min-height 기본값(auto)이면 자식 컨텐츠의 내재 높이만큼 확장되어 overflow-y가 활성화되지 않는 flexbox 함정. Oracle 탭(OracleStepPanel)에서 OracleConsole + ClaimApproval 두 카드가 항상 함께 펼쳐져 컨테이너 높이를 초과하면서 잘려 보이고 스크롤도 되지 않던 문제를 해결. tab-contract는 StepCard accordion으로 활성 step만 펼쳐져 같은 함정에도 노출도가 낮았음. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
진짜 원인: StepsScroll의 display:flex column 안에서 자식 Card들이 기본
flex-shrink:1 때문에 컨테이너 높이에 맞추기 위해 강제로 줄어들었고,
자기 자신만 작아진 Card의 overflow:hidden이 안의 CardBody 하단을
클립해 ClaimApproval의 Approve/Settle 버튼이 사라지던 현상.
flex가 미리 자식을 줄여놓아서 scrollHeight === clientHeight가 되었고,
overflow-y:auto가 작동할 'overflow'가 발생하지 않아 마우스 휠 스크롤도
무반응. computed style + 부모 chain dump로 Card height(181) vs
CardBody height(221) 불일치를 확인하여 짚었다.
수정:
- StepsScroll > * { flex-shrink: 0 } — 자식 Card가 자연 높이를 유지하게
하여 총합이 컨테이너를 초과하면 비로소 overflow-y:auto가 작동
- 함께 잡은 layout 보강:
* Dashboard.tsx Body/TabContent에 min-height:0, min-width:0
* ActionPanel에 align-self:stretch + height:100% + max-height:
calc(100vh - 140px) + min-height:0 — flex chain 안전 보강 + viewport
기준 hard ceiling
* StepsScroll 스크롤바 가시성 향상 (3px → 8px, hover 색상)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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.
목적
주요 변경사항