fix: 보유행 긴 종목명 줄바뀜(배지/이름 분리) 방지

line1이 flex-wrap이라 이름 길면 종목명이 다음줄로 내려가 매수등급 배지만 윗줄에 남음(KODEX AI핵심전력설비 등).
배지+이름을 .name-head로 묶고 이름은 min-width:0 ellipsis 처리 → 한 묶음 유지, 길면 잘림.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hyowons
2026-06-08 16:09:47 +09:00
parent b2fd264690
commit f9f43762cf
+4 -2
View File
@@ -2667,7 +2667,7 @@ def _render_holding_row(r: dict, total_value: int, show_day_change: bool = False
return f'''<details class="row {pcls} mode-held" data-row-key="{row_key}" data-rt-qty="{qty}" data-rt-cost="{eval_value - profit}" data-rt-px="{price}" data-rt-prevclose="{price - day_change}">
<summary>
<div class="left">
<div class="line1">{_buy_rank_badge(buy_amount)}<span class="stock">{stock}</span>{tag_chip}{star}<span class="code">{accounts}</span></div>
<div class="line1"><span class="name-head">{_buy_rank_badge(buy_amount)}<span class="stock">{stock}</span></span>{tag_chip}{star}<span class="code">{accounts}</span></div>
<div class="line2"><span class="badge held">보유 {qty:,}</span>{_pending_badges_html(r)}<span class="muted small wt-chip">비중 <span class="rt-weight">{weight:.2f}</span>%</span></div>
{summary_journal_html}
</div>
@@ -4030,7 +4030,9 @@ details.row + .section-label { margin-top: 14px; padding-top: 24px; border-top-c
.right { text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; justify-content: center; }
.line1 { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.stock { font-size: 14px; font-weight: 600; color: #f0f0f0; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 매수등급 배지 + 종목명을 묶음으로 이름 길어도 배지와 분리돼 줄바뀜되지 않게(이름은 ellipsis). */
.name-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.stock { font-size: 14px; font-weight: 600; color: #f0f0f0; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.code { font-size: 11px; color: #5a5f6c; font-weight: 400; flex: none; }
.line2 { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; }