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

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

@ -96,14 +96,20 @@ export const FitAssessment: React.FC<FitAssessmentProps> = ({
<div className={cn("space-y-2", className)}> <div className={cn("space-y-2", className)}>
{/* Summary / Reason */} {/* Summary / Reason */}
<div className="rounded-lg border border-primary/20 bg-primary/5 px-3 py-2.5"> <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"> <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">
<Sparkles className="h-3 w-3" /> <div className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-primary/70">
Fit Assessment <Sparkles className="h-3 w-3 shrink-0" aria-hidden />
{analysis && <RoleMatchBadge score={analysis.roleTypeMatch} />} <span className="leading-none">Fit assessment</span>
{analysis && typeof analysis.workArrangementMatch === "number" && ( </div>
{analysis && (
<div className="flex flex-wrap items-center gap-1.5">
<RoleMatchBadge score={analysis.roleTypeMatch} />
{typeof analysis.workArrangementMatch === "number" && (
<WorkArrangementBadge score={analysis.workArrangementMatch} /> <WorkArrangementBadge score={analysis.workArrangementMatch} />
)} )}
</div> </div>
)}
</div>
{job.suitabilityReason && ( {job.suitabilityReason && (
<p className="text-xs text-foreground/90 leading-relaxed font-medium"> <p className="text-xs text-foreground/90 leading-relaxed font-medium">
{job.suitabilityReason} {job.suitabilityReason}

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

@ -45,10 +45,10 @@ export const JobListPanel: React.FC<JobListPanelProps> = ({
</div> </div>
) : ( ) : (
<div className="divide-y divide-border/40"> <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 <label
htmlFor="job-list-select-all" 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 <Checkbox
id="job-list-select-all" id="job-list-select-all"
@ -64,9 +64,12 @@ export const JobListPanel: React.FC<JobListPanelProps> = ({
}} }}
aria-label="Select all filtered jobs" aria-label="Select all filtered jobs"
/> />
Select all filtered <span className="min-w-0">Select all filtered</span>
</label> </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 {selectedJobIds.size} selected
</span> </span>
</div> </div>