From ee5a13163bc34f185c57e96c8361a3cfb2c65f08 Mon Sep 17 00:00:00 2001 From: "hehihoho3@gmail.com" Date: Mon, 29 Jun 2026 18:24:13 +0900 Subject: [PATCH] =?UTF-8?q?fix(comment-cards):=20=EC=B9=B4=EB=93=9C=20?= =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=8A=A8=EB=A6=AC=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=EC=9C=BC=EB=A1=9C=20=EC=A7=A7=EC=9D=80=20?= =?UTF-8?q?=EA=B8=80=20=ED=9D=B0=20=EC=97=AC=EB=B0=B1=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit grid가 행 단위로 최대 높이에 맞춰 늘어나던 것을 CSS 다단(column)으로 변경. 각 카드가 내용 높이에 맞고 빈틈없이 쌓이도록 break-inside:avoid + margin-bottom 적용. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/main/resources/templates/comment-cards.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/main/resources/templates/comment-cards.html b/src/main/resources/templates/comment-cards.html index 764123b..da19ce8 100644 --- a/src/main/resources/templates/comment-cards.html +++ b/src/main/resources/templates/comment-cards.html @@ -13,10 +13,12 @@ .cc-btn { background:var(--primary-gradient); color:#fff; border:none; border-radius:8px; 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-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem; } + /* 메이슨리(다단): 카드가 내용 높이에 딱 맞게 쌓여 짧은 글 아래 흰 여백이 안 생김 */ + .cc-grid { column-width:320px; column-gap:1rem; } /* 카드: 영상 위에 얹을 소스 → 투명 캡처 기준. 미리보기는 surface 배경. */ .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-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; }