fix(scheduling): truncate long customer names, prevent list item wrap

- Customer name in list items: truncate with max-w-[40%]
- Daily km and completion rate: flex-shrink-0 to stay on same line

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-16 21:28:30 +08:00
parent 9398688829
commit 64f47d5ad6

View File

@@ -55,10 +55,10 @@ export default function SuggestionList({ suggestions, onSelect }: Props) {
<span className="text-[9px] text-slate-300">·</span>
<span className="text-[9px] text-slate-400">{v.region}</span>
</div>
<div className="flex items-center gap-3 mt-0.5 text-[10px] text-slate-400">
<span><Blur>{v.customer || '-'}</Blur></span>
<span> <span className="text-slate-600 font-medium">{Math.round(v.customerAvgDaily)}</span> km</span>
<span> <span className={`font-medium ${v.completionRate >= 1 ? 'text-emerald-600' : v.completionRate >= 0.5 ? 'text-amber-600' : 'text-rose-500'}`}>{fmtRate(v.completionRate)}</span></span>
<div className="flex items-center gap-2 mt-0.5 text-[10px] text-slate-400 overflow-hidden">
<span className="truncate max-w-[40%] flex-shrink"><Blur>{v.customer || '-'}</Blur></span>
<span className="flex-shrink-0"> <span className="text-slate-600 font-medium">{Math.round(v.customerAvgDaily)}</span> km</span>
<span className="flex-shrink-0"> <span className={`font-medium ${v.completionRate >= 1 ? 'text-emerald-600' : v.completionRate >= 0.5 ? 'text-amber-600' : 'text-rose-500'}`}>{fmtRate(v.completionRate)}</span></span>
</div>
</div>