ilia/Jobber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Fit assessment header and job list toolbar spacing on reload

Browse Source 
- 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
This commit is contained in:
ilia 2026-04-05 22:22:41 -04:00
parent 6b26f70ef7
commit 87dbda3df1
2 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
orchestrator/src/client/components/FitAssessment.tsx
View File

@ -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 && (

11
orchestrator/src/client/pages/orchestrator/JobListPanel.tsx
View File

@ -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>