From 87dbda3df1b459e74a05089e3f58efd45feae649 Mon Sep 17 00:00:00 2001
From: ilia <idobkin@gmail.com>
Date: Sun, 5 Apr 2026 22:22:41 -0400
Subject: [PATCH] Fix Fit assessment header and job list toolbar spacing on
 reload

- Put match badges in their own flex-wrap row under the title (no run-on text)
- Toolbar: flex-wrap, min-w-0 label, shrink-0 count, middot separator on narrow layouts

Made-with: Cursor
---
 .../src/client/components/FitAssessment.tsx    | 18 ++++++++++++------
 .../client/pages/orchestrator/JobListPanel.tsx | 11 +++++++----
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/orchestrator/src/client/components/FitAssessment.tsx b/orchestrator/src/client/components/FitAssessment.tsx
index 5dd850f..d06b70d 100644
--- a/orchestrator/src/client/components/FitAssessment.tsx
+++ b/orchestrator/src/client/components/FitAssessment.tsx
@@ -96,12 +96,18 @@ export const FitAssessment: React.FC<FitAssessmentProps> = ({
     <div className={cn("space-y-2", className)}>
       {/* Summary / Reason */}
       <div className="rounded-lg border border-primary/20 bg-primary/5 px-3 py-2.5">
-        <div className="text-[11px] font-medium uppercase tracking-wide text-primary/70 mb-1.5 flex items-center gap-1.5">
-          <Sparkles className="h-3 w-3" />
-          Fit Assessment
-          {analysis && <RoleMatchBadge score={analysis.roleTypeMatch} />}
-          {analysis && typeof analysis.workArrangementMatch === "number" && (
-            <WorkArrangementBadge score={analysis.workArrangementMatch} />
+        <div className="mb-1.5 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between sm:gap-x-3 sm:gap-y-2">
+          <div className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-primary/70">
+            <Sparkles className="h-3 w-3 shrink-0" aria-hidden />
+            <span className="leading-none">Fit assessment</span>
+          </div>
+          {analysis && (
+            <div className="flex flex-wrap items-center gap-1.5">
+              <RoleMatchBadge score={analysis.roleTypeMatch} />
+              {typeof analysis.workArrangementMatch === "number" && (
+                <WorkArrangementBadge score={analysis.workArrangementMatch} />
+              )}
+            </div>
           )}
         </div>
         {job.suitabilityReason && (
diff --git a/orchestrator/src/client/pages/orchestrator/JobListPanel.tsx b/orchestrator/src/client/pages/orchestrator/JobListPanel.tsx
index 887dbfa..a7b4621 100644
--- a/orchestrator/src/client/pages/orchestrator/JobListPanel.tsx
+++ b/orchestrator/src/client/pages/orchestrator/JobListPanel.tsx
@@ -45,10 +45,10 @@ export const JobListPanel: React.FC<JobListPanelProps> = ({
       </div>
     ) : (
       <div className="divide-y divide-border/40">
-        <div className="flex items-center justify-between gap-3 px-4 py-2 opacity-100 transition-opacity sm:opacity-50 sm:hover:opacity-100">
+        <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 px-4 py-2 opacity-100 transition-opacity sm:opacity-50 sm:hover:opacity-100">
           <label
             htmlFor="job-list-select-all"
-            className="flex items-center gap-2 text-xs text-muted-foreground"
+            className="flex min-w-0 flex-1 items-center gap-2 text-xs text-muted-foreground"
           >
             <Checkbox
               id="job-list-select-all"
@@ -64,9 +64,12 @@ export const JobListPanel: React.FC<JobListPanelProps> = ({
               }}
               aria-label="Select all filtered jobs"
             />
-            Select all filtered
+            <span className="min-w-0">Select all filtered</span>
           </label>
-          <span className="text-xs text-muted-foreground tabular-nums">
+          <span
+            className="shrink-0 text-xs text-muted-foreground tabular-nums before:content-['·'] before:mr-1.5 before:text-muted-foreground/50 sm:before:content-none"
+            aria-live="polite"
+          >
             {selectedJobIds.size} selected
           </span>
         </div>