From 80809ca40614d2d1977b5c1401c223417b43e1c0 Mon Sep 17 00:00:00 2001
From: Chaim <chaim@marcus-law.co.il>
Date: Sat, 20 Jun 2026 18:11:32 +0000
Subject: [PATCH] =?UTF-8?q?fix(ui):=20case=20header=20=E2=80=94=20keep=20m?=
 =?UTF-8?q?etadata=20parallel=20to=20title,=20clamp=20parties=20to=202=20l?=
 =?UTF-8?q?ines?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hearing-date/updated/sync metadata dl dropped below the title (taking rows and
pushing the band down) when the appellants/respondents line was long, because the
outer row used flex-wrap. Fix:

- Drop flex-wrap on the title↔metadata row (and flex-1 on the title block) so the
  metadata dl stays parallel to the H1; the title block shrinks instead.
- Clamp the parties line (and the subject fallback) to 2 lines with line-clamp-2 +
  title tooltip, so a long party list no longer grows the band.

Chair-directed layout fix; existing components, no new design.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-ui/src/components/cases/case-header.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/web-ui/src/components/cases/case-header.tsx b/web-ui/src/components/cases/case-header.tsx
index 4d2aa05..5bcc24c 100644
--- a/web-ui/src/components/cases/case-header.tsx
+++ b/web-ui/src/components/cases/case-header.tsx
@@ -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}