From 5cf1ff65f4421fe3702b21ac97270bac59b879bc Mon Sep 17 00:00:00 2001
From: Chaim <chaim@marcus-law.co.il>
Date: Tue, 30 Jun 2026 19:41:03 +0000
Subject: [PATCH] =?UTF-8?q?fix(case-ui):=20drafts=20cards=20in=20mockup=20?=
 =?UTF-8?q?order=20=E2=80=94=20files=20=E2=86=92=20final=20=E2=86=92=20fee?=
 =?UTF-8?q?dback=20(18h)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 3 drafts cards rendered final-decision before draft-files; mockup 18h has
the draft-files card first, then final+learning, then feedback. Switched the
container to flex-col and gave each card an explicit `order` so the visual order
matches the mockup without reordering any JSX (zero-risk).

tsc --noEmit + eslint clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-ui/src/components/cases/drafts-panel.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/web-ui/src/components/cases/drafts-panel.tsx b/web-ui/src/components/cases/drafts-panel.tsx
index 3237388..a23b73f 100644
--- a/web-ui/src/components/cases/drafts-panel.tsx
+++ b/web-ui/src/components/cases/drafts-panel.tsx
@@ -233,10 +233,12 @@ export function DraftsPanel({
   }
 
   return (
-    <div className="space-y-6">
+    // flex + per-card `order` so the visual order matches mockup 18h
+    // (drafts → final+learning → feedback) without reordering the JSX.
+    <div className="flex flex-col gap-6">
       {/* ── Banner ── */}
       {isDraftReady && (
-        <div className="flex items-center gap-3 rounded-lg border border-gold/40 bg-gold-wash px-4 py-3">
+        <div className="order-1 flex items-center gap-3 rounded-lg border border-gold/40 bg-gold-wash px-4 py-3">
           <FileText className="w-5 h-5 text-gold-deep shrink-0" />
           <span className="text-sm font-medium text-gold-deep">
             {draftLabel}
@@ -260,7 +262,7 @@ export function DraftsPanel({
 
       {/* ── Active-draft badge — the DOCX that is the current source of truth ── */}
       {activeDraft?.filename && (
-        <div className="flex items-center gap-2 text-xs text-ink-muted">
+        <div className="order-2 flex items-center gap-2 text-xs text-ink-muted">
           <span>מקור האמת:</span>
           <Badge variant="outline" className="bg-surface">
             {activeDraft.filename}
@@ -269,7 +271,7 @@ export function DraftsPanel({
       )}
 
       {/* ── Chair's signed final decision — clean upload + staged learning pipeline ── */}
-      <section className="rounded-lg border border-gold/40 bg-gold-wash/40 p-4 space-y-3">
+      <section className="order-4 rounded-lg border border-gold/40 bg-gold-wash/40 p-4 space-y-3">
         <input
           ref={finalFileRef}
           type="file"
@@ -353,7 +355,7 @@ export function DraftsPanel({
       </section>
 
       {/* ── Card: draft files (mockup 18h) ── */}
-      <section className="rounded-lg border border-rule bg-surface p-4">
+      <section className="order-3 rounded-lg border border-rule bg-surface p-4">
         <div className="flex items-center justify-between mb-3">
           <h3 className="text-navy text-base">קבצי טיוטה</h3>
           <div className="flex items-center gap-2">
@@ -522,7 +524,7 @@ export function DraftsPanel({
       </section>
 
       {/* ── Card: chair feedback (mockup 18h) ── */}
-      <section className="rounded-lg border border-rule bg-surface p-4">
+      <section className="order-5 rounded-lg border border-rule bg-surface p-4">
         <div className="flex items-center justify-between mb-3">
           <h3 className="text-navy text-base">
             הערות יו״ר