hehihoho3/h-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(comment-cards): 카드 메이슨리 레이아웃으로 짧은 글 흰 여백 제거

Browse Source 
grid가 행 단위로 최대 높이에 맞춰 늘어나던 것을 CSS 다단(column)으로 변경.
각 카드가 내용 높이에 맞고 빈틈없이 쌓이도록 break-inside:avoid + margin-bottom 적용.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hehihoho3@gmail.com 2026-06-29 18:24:13 +09:00
parent 6136eb83e9
commit ee5a13163b
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/resources/templates/comment-cards.html
View File

@ -13,10 +13,12 @@
.cc-btn { background:var(--primary-gradient); color:#fff; border:none; border-radius:8px; .cc-btn { background:var(--primary-gradient); color:#fff; border:none; border-radius:8px;
padding:.55rem 1rem; font-weight:600; cursor:pointer; font-size:14px; } padding:.55rem 1rem; font-weight:600; cursor:pointer; font-size:14px; }
.cc-btn.secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--border); } .cc-btn.secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--border); }
.cc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem; } /* 메이슨리(다단): 카드가 내용 높이에 딱 맞게 쌓여 짧은 글 아래 흰 여백이 안 생김 */
.cc-grid { column-width:320px; column-gap:1rem; }
/* 카드: 영상 위에 얹을 소스 → 투명 캡처 기준. 미리보기는 surface 배경. */ /* 카드: 영상 위에 얹을 소스 → 투명 캡처 기준. 미리보기는 surface 배경. */
.comment-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; .comment-card { background:var(--surface); border:1px solid var(--border); border-radius:12px;
padding:1rem; position:relative; } padding:1rem; position:relative; break-inside:avoid; -webkit-column-break-inside:avoid;
margin-bottom:1rem; }
.cc-head { display:flex; gap:.6rem; align-items:flex-start; } .cc-head { display:flex; gap:.6rem; align-items:flex-start; }
.cc-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; background:var(--surface-2); } .cc-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; background:var(--surface-2); }
.cc-meta { flex:1; min-width:0; } .cc-meta { flex:1; min-width:0; }