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:
@@ -1,7 +1,7 @@
|
|||||||
{% extends "erp_base.html" %}
|
{% extends "erp_base.html" %}
|
||||||
|
|
||||||
{% block head_extra %}
|
{% block head_extra %}
|
||||||
<link rel="stylesheet" href="/static/project.css?v=20260917n" />
|
<link rel="stylesheet" href="/static/project.css?v=20260917o" />
|
||||||
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
|
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{% extends "erp_base.html" %}
|
{% extends "erp_base.html" %}
|
||||||
|
|
||||||
{% block head_extra %}
|
{% block head_extra %}
|
||||||
<link rel="stylesheet" href="/static/project.css?v=20260917n" />
|
<link rel="stylesheet" href="/static/project.css?v=20260917o" />
|
||||||
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
|
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{% extends "erp_base.html" %}
|
{% extends "erp_base.html" %}
|
||||||
|
|
||||||
{% block head_extra %}
|
{% block head_extra %}
|
||||||
<link rel="stylesheet" href="/static/project.css?v=20260917n" />
|
<link rel="stylesheet" href="/static/project.css?v=20260917o" />
|
||||||
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
|
<!-- 구글 머티리얼 심볼(담당자 아이콘 등) — self-host -->
|
||||||
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
|
<link rel="stylesheet" href="/static/vendor/material-symbols/material-symbols.css" />
|
||||||
<!-- 타임라인 vis-timeline — self-host -->
|
<!-- 타임라인 vis-timeline — self-host -->
|
||||||
|
|||||||
@@ -710,11 +710,17 @@
|
|||||||
.pj-chat-pending-chip button:hover { color: #c22b10; }
|
.pj-chat-pending-chip button:hover { color: #c22b10; }
|
||||||
|
|
||||||
/* ── 첨부 버튼(클립) — 입력창과 높이를 맞추고, 호버 시 회색 네모 안에
|
/* ── 첨부 버튼(클립) — 입력창과 높이를 맞추고, 호버 시 회색 네모 안에
|
||||||
아이콘이 가로세로 정가운데 오도록 line-height/box-sizing까지 정리. ── */
|
아이콘이 가로세로 정가운데 오도록 line-height/box-sizing까지 정리.
|
||||||
.pj-chat-attach-btn {
|
.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;
|
display: inline-flex; align-items: center; justify-content: center;
|
||||||
width: 34px; height: 34px; box-sizing: border-box; flex: 0 0 auto;
|
width: 34px; height: 34px; box-sizing: border-box; flex: 0 0 auto;
|
||||||
border-radius: 8px; cursor: pointer; color: #5f6368; line-height: 0;
|
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:hover { background: #f1f2f4; }
|
||||||
.pj-chat-attach-btn .material-symbols-outlined {
|
.pj-chat-attach-btn .material-symbols-outlined {
|
||||||
|
|||||||
Reference in New Issue
Block a user