fix(project): 댓글 첨부 버튼 정렬 - .pj-modal-card label 규칙과 상세도 충돌 수정
.pj-modal-card label { display:block; margin-bottom:12px; font-size:12.5px }
(다른 모달 폼 라벨용 공용 규칙, 클래스+엘리먼트라 상세도 0,1,1)이
.pj-chat-attach-btn(단일 클래스, 상세도 0,1,0)의 display:flex 를 조용히
덮어써서 display:block 이 됐고, flex 아닐 때 align-items/justify-content
는 무효라 아이콘이 정가운데로 안 갔음. margin-bottom:12px 까지 새어들어와
버튼이 실제로 위로 살짝 밀려 보였음. 헤드리스 크롬으로 실제 project.css를
.pj-modal-card 컨텍스트에서 그대로 렌더해 getBoundingClientRect 로 재현
확인 후, .pj-modal-card .pj-chat-attach-btn 로 상세도를 올리고 새는 값
(margin-bottom/font-size)도 명시적으로 되돌려 고침 — 아이콘 상하좌우 7px
로 정확히 정가운데.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -710,11 +710,17 @@
|
||||
.pj-chat-pending-chip button:hover { color: #c22b10; }
|
||||
|
||||
/* ── 첨부 버튼(클립) — 입력창과 높이를 맞추고, 호버 시 회색 네모 안에
|
||||
아이콘이 가로세로 정가운데 오도록 line-height/box-sizing까지 정리. ── */
|
||||
.pj-chat-attach-btn {
|
||||
아이콘이 가로세로 정가운데 오도록 line-height/box-sizing까지 정리.
|
||||
.pj-modal-card label { display:block; margin-bottom:12px; font-size:12.5px }
|
||||
이 이 label을 가로채(클래스+엘리먼트 조합이라 detay:flex 단일 클래스보다
|
||||
상세도가 높음) display 는 block으로, margin-bottom 12px 까지 먹여서
|
||||
실제로는 미세하게 위로 밀려 보였다 — .pj-modal-card 를 앞에 붙여 상세도로
|
||||
이기고, 새는 값들도 전부 명시적으로 되돌린다. ── */
|
||||
.pj-modal-card .pj-chat-attach-btn {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
width: 34px; height: 34px; box-sizing: border-box; flex: 0 0 auto;
|
||||
border-radius: 8px; cursor: pointer; color: #5f6368; line-height: 0;
|
||||
margin-bottom: 0; font-size: 0;
|
||||
}
|
||||
.pj-chat-attach-btn:hover { background: #f1f2f4; }
|
||||
.pj-chat-attach-btn .material-symbols-outlined {
|
||||
|
||||
Reference in New Issue
Block a user