fix(collapsible): truncate long subtitle instead of pushing title

리뷰어 b46f6f1 non-blocking 노트 반영. 기존 subtitle 은 shrink-0 이라
값이 길어지면 헤더 폭을 넘기며 title 을 두 줄로 밀어낼 수 있었음.
실제 트리거 예: PriceTargets 의 "목표 1,234,567 · 손절 987,654"
같은 큰 주가 범위.

변경:
- subtitle: shrink-0 제거 + min-w-0 truncate → 폭 부족 시 말줄임표.
- title flex span: min-w-0 추가 → flex shrink 계산이 양쪽 모두에서
  정상 동작하도록 (min-w-0 없으면 자식 텍스트의 min-content 가 부모
  shrink 를 막아 truncate 가 발동 안 됨).

title 텍스트 자체는 늘 짧음(호가/내 목표가/관련 종목/투자 메모/가격
알람) — title 쪽 truncate 는 불필요, min-w-0 만으로 충분.

검증:
- npx tsc --noEmit clean
- npx next lint "✔ No ESLint warnings or errors"
This commit is contained in:
claude-owner
2026-06-01 10:44:04 +09:00
parent b46f6f1b3a
commit bd6e1dac6d

View File

@@ -56,7 +56,7 @@ export function Collapsible({
aria-expanded={open}
className="flex w-full items-baseline justify-between gap-2 px-4 py-3 text-left transition hover:bg-zinc-900/60"
>
<span className="flex items-center gap-2 text-sm font-medium text-zinc-200">
<span className="flex min-w-0 items-center gap-2 text-sm font-medium text-zinc-200">
<span
className={`inline-block text-[10px] text-zinc-500 transition-transform ${
open ? "rotate-90" : ""
@@ -68,7 +68,13 @@ export function Collapsible({
{title}
</span>
{subtitle != null && (
<span className="shrink-0 text-[10px] text-zinc-500">{subtitle}</span>
// min-w-0 + truncate: subtitle 이 길어지면(예: PriceTargets 의 "목표 1,234,567 ·
// 손절 987,654") 사이드바 폭을 넘기는 대신 말줄임표로 끝나도록. shrink-0 였을 땐
// title 을 밀어내며 헤더가 두 줄로 깨질 수 있었음. title 쪽도 min-w-0 을 줘 flex
// shrink 계산이 올바르게 되도록.
<span className="min-w-0 truncate text-[10px] text-zinc-500">
{subtitle}
</span>
)}
</button>
<div className={open ? "border-t border-zinc-800 px-4 pb-4 pt-3" : "hidden"}>