fix(ui): case header — metadata parallel to title, parties clamped to 2 lines #324

Merged
chaim merged 1 commits from worktree-case-header-layout into main 2026-06-20 18:11:55 +00:00

View File

@@ -63,8 +63,10 @@ export function CaseHeader({
<span className="text-navy tabular-nums">{data?.case_number ?? "…"}</span>
</nav>
<div className="flex items-start justify-between gap-6 flex-wrap">
<div className="min-w-0">
{/* title block + metadata on one row — no wrap, so the metadata dl stays
parallel to the H1 and a long parties line can't push it below. */}
<div className="flex items-start justify-between gap-6">
<div className="min-w-0 flex-1">
{/* title row — H1 + status/type/blam chips inline (mockup .band h1) */}
<h1 className="text-navy text-[1.7rem] font-bold leading-tight flex items-center gap-3 flex-wrap mb-0">
<span className="tabular-nums">
@@ -107,11 +109,15 @@ export function CaseHeader({
{data.title}
</p>
)}
{/* parties line (mockup .parties) */}
{/* parties line (mockup .parties) — clamped to 2 lines so a long list
of appellants/respondents doesn't grow the band; full text on hover. */}
{parties ? (
<p className="text-ink-soft text-sm mt-1.5">{parties}</p>
<p className="text-ink-soft text-sm mt-1.5 max-w-3xl line-clamp-2" title={parties}>
{parties}
</p>
) : data?.subject ? (
<p className="text-ink-soft text-sm mt-1.5 max-w-3xl leading-relaxed">
<p className="text-ink-soft text-sm mt-1.5 max-w-3xl leading-relaxed line-clamp-2"
title={data.subject}>
{data.subject}
</p>
) : null}