Repository navigation
fix: 피커 목록이 길면 PR 줄이 있는 행이 눌려 겹치던 것을 고친다 - #93
Merged
Merged
Conversation
#ref-picker-list는 max-height가 있는 세로 flex 목록인데, 행이 기본값 flex-shrink: 1이었다. 그래서 내용이 넘치면 목록이 스크롤되는 대신 행이 min-height(26px)까지 눌렸고, 두 줄(PR) 행은 둘째 줄이 다음 행 위로 삐져나가 겹쳤다. 행에 flex-shrink: 0을 둔다. 기존 픽스처는 행이 적어 목록이 넘치지 않으므로 이 결함이 드러나지 않았다. PR이 붙은 브랜치 10개로 목록을 넘치게 하는 picker-scroll.e2e.ts를 더한다. 수정 전에는 실패하고 수정 후에는 통과한다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cfmut4Hza689sKWsNSbz4H
리뷰 지적: flex 항목의 height: 1px는 최소 높이가 아니라 시작 크기라서, 행만 고정하면 넘치는 높이를 구분선(.ref-divider)이 떠안아 0px로 사라졌다. flex-shrink: 0을 .ref-row에서 #ref-picker-list > *로 올린다. picker-scroll.e2e.ts는 head를 브랜치로 열어 두 구역과 구분선이 모두 서게 하고, 구분선 높이가 1px인지 단언한다(수정 전 0px로 실패). 아무것도 못 잡던 인접 행 비겹침 단언은 빼고, 실패 시 눌린 행을 보여 주도록 바꾸고, 임시 폴더 누수를 막는다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cfmut4Hza689sKWsNSbz4H
say8425
added a commit
that referenced
this pull request
Oct 1, 2026
이 PR이 쓰인 뒤 머지된 #92(다크 고정)와 #93(피커 목록)의 주석에서 경위·실측 값과 긴 설명을 걷고, 근거는 rules로 옮긴다(viewer.md의 다크 전용 항목, viewer-toolbar.md의 피커 목록 항목). 두 회귀망 스펙도 해당 rules의 paths에 넣는다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cfmut4Hza689sKWsNSbz4H
say8425
added a commit
that referenced
this pull request
Oct 1, 2026
* docs: 주석은 최소로 둔다는 규칙을 CLAUDE.md에 둔다 틀린 주석은 주석이 없는 것보다 나쁘고, 주석이 많을수록 코드와 어긋나는 곳도 는다(이번 문서 정리에서 낡은 주석이 10여 곳 나왔다). 코드로 드러나지 않고 지우면 실수하게 되는 "왜"만 한두 줄로 남기고, 경위·수치·PR 번호·줄 번호·복사는 쓰지 않는다. 지시자 주석과 vendored 패키지의 주석은 그대로 둔다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cfmut4Hza689sKWsNSbz4H * refactor: 주석을 최소로 줄이고 사실과 다른 주석을 고친다 CLAUDE.md의 주석 규칙에 맞춰 diffdeck 소유 코드(apps/viewer, scripts, CI 설정)의 주석을 정리한다. vendored packages/는 건드리지 않는다. - 코드를 되풀이하는 설명, 경위, 실측 수치, 줄 번호, rules의 복사를 지우고 지우면 다음 사람이 실수하는 "왜"만 남긴다. - 코드와 어긋난 주석을 고치거나 지운다. 예: 라우트 개수, 옛 캐시 키, `$`에서 gitText로 바뀐 호출 설명, 걷어낸 base 피커·트리거를 전제한 서술, 특이도·grid-column 값, 픽스처 옵션 설명. - 드래그 좌표의 이유는 공용 헬퍼 e2e/fixtures/drag.ts 한 곳에 모은다. 코드는 바뀌지 않았다: 바뀐 152개 파일 모두 TS는 트랜스파일 결과가, HTML·YAML·TOML은 주석을 뺀 결과와 파싱 결과가 HEAD와 같다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cfmut4Hza689sKWsNSbz4H * docs: 리뷰 반영 — 잃은 계약을 되살리고 [diffdeck] 주석도 같은 기준으로 줄인다 - CLAUDE.md 주석 절: 어기기 쉬운 자리의 한 줄 표지 + rules 파일 이름은 복사가 아니라고 명시하고, 남길 "왜"에 테스트의 판별 전제를 더하고, 우리가 단 [diffdeck] 주석도 이 절을 따른다고 적는다. - 잃은 계약 둘: 라벨과 피커가 같은 /api/refs 캐시를 탄다(viewer-toolbar.md), large-file-collapse ①은 옛·새 줄 수의 합이 임계값을 넘어야 판별한다 (largeFile.ts·fixtures/repo.ts). - 사실과 다른 주석: drag.ts와 grab.md(좌표 값은 호출부에 있다), watch-refresh의 README 단언, playwright 타임아웃과 짝인 폴 값. - 덜 지운 것: 경위 문구 하나, gitOutput.ts·singleFlight.ts 머리 주석. - rules 인용을 파일 이름으로 통일하고, 한 줄로 합쳐져 100칸을 넘은 테스트 주석을 다시 줄바꿈한다. - vendored [diffdeck] 주석에서 실측·경위와 틀린 진술(예외 3의 "뷰어는 non-worker 경로를 탄다", 예외 2의 100k 컷오프 예)을 걷고 예외 번호를 단다. 예외 3의 회귀망 설명도 워커 경로를 반영한다. 코드는 바뀌지 않았다: TS 5.9 파서로 주석을 뺀 출력을 비교하면 이 PR 전체 157개 코드 파일이 기준과 같다(타입 포함). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cfmut4Hza689sKWsNSbz4H * refactor: #92·#93이 더한 주석도 같은 기준으로 줄인다 이 PR이 쓰인 뒤 머지된 #92(다크 고정)와 #93(피커 목록)의 주석에서 경위·실측 값과 긴 설명을 걷고, 근거는 rules로 옮긴다(viewer.md의 다크 전용 항목, viewer-toolbar.md의 피커 목록 항목). 두 회귀망 스펙도 해당 rules의 paths에 넣는다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Cfmut4Hza689sKWsNSbz4H --------- Co-authored-by: Claude Opus 5.5 <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.
요약
툴바 피커(
#ref-picker)의 목록이 길어지면 PR 줄이 있는 두 줄 행이 납작하게 눌려 다음 행과 겹쳤다. #87에서 두 줄 행을 그릴 때부터 있던 결함이다.원인:
#ref-picker-list는max-height: 260px; overflow-y: auto인 세로 flex 목록인데, 행(.ref-row)이 기본값flex-shrink: 1이다. 내용이 260px를 넘으면 목록이 스크롤되는 대신 모든 행이min-height(26px)까지 줄어들고, 두 줄 행(약 40px 필요)의 둘째 줄이 다음 행 위로 삐져나간다. 재현 때 잰 값은 목록 260px · 내용 365px · 행 12개가 전부 26px였다.수정: 목록의 모든 자식(
#ref-picker-list > *)에flex-shrink: 0을 둔다. 처음에는 행에만 걸었는데, 리뷰에서 구분선(.ref-divider,height: 1px)이 같은 이유로 0px로 사라진다는 지적을 받았다. flex 항목의height는 최소 높이가 아니라 시작 크기라서, 행만 고정하면 넘치는 높이를 구분선이 떠안는다. 수정 뒤 PR 행은 40px, 한 줄 행은 26px, 구분선은 1px이고 목록은 스크롤된다.회귀망:
picker-scroll.e2e.ts. 기존 픽스처는 행이 적어 목록이 넘치지 않으므로, PR이 붙은 브랜치 10개로 목록을 넘치게 한다. head를 브랜치로 열어 두 구역과 구분선이 모두 서게 한 뒤, 목록이 스크롤되는지, 어떤 행도 내용보다 낮게 눌리지 않는지(실패하면 눌린 행을 보여 준다), 구분선이 1px인지, PR 행이 한 줄 행보다 높은지를 단언한다.Test plan
picker-scroll.e2e.ts: 수정 전 RED(행 내용이 행 높이를 넘침, 구분선 0px) → 수정 후 GREENgh헬퍼를fixtures/로 빼는 것은pr-badge.e2e.ts까지 고쳐야 해서, 같은 파일을 만지는 주석 정리 PR과 겹치지 않도록 후속으로 미룬다.bun run lint,bun run format:checkScreenshots
빌드한
dist/cli.js를 Chrome으로 띄워, 같은 데모 리포(워크트리 2개 + PR이 붙은 브랜치 여럿)에서 피커를 열고 찍었다. Before는main과 같은 CSS의 빌드다.🤖 Generated with Claude Code
https://claude.ai/code/session_01Cfmut4Hza689sKWsNSbz4H