Noticed while reviewing #76 (the screenshot re-take). Not a defect in either #55 or #66 — a layout consequence neither card was scoped to decide.
What it looks like
src/dashboards/employer-hiring.dashboard.ts places its four KPI tiles at w: 4 each:
| widget |
layout |
open_jobs |
{ x: 0, y: 0, w: 4, h: 2 } |
awaiting_action |
{ x: 4, y: 0, w: 4, h: 2 } |
interviews_this_week |
{ x: 8, y: 0, w: 4, h: 2 } |
avg_days_to_offer |
{ x: 0, y: 2, w: 4, h: 2 } |
pipeline_by_stage |
{ x: 0, y: 4, w: 12, h: 5 } |
Three tiles fill row 0 across all 12 columns, so the fourth necessarily opens row 2 — alone, with three empty column-slots beside it — and the bar chart is displaced to row 4.
At the set's standard 1440 × 900 viewport that puts Pipeline by Stage past the fold: the freshly re-taken docs/screenshots/03-hiring-home-overview.png shows its title, description, y-axis and the tops of two bars, and nothing else. #76's caption handles that honestly (it says the bars are cropped and cites the values from the dataset query, as 01 and 02 already do), but the caption is working around a layout rather than describing a good one.
The obvious fix, and why it is a guess
Four w: 3 tiles on row 0, pipeline back to y: 2. That restores a single KPI row and brings the whole chart above the fold.
⚠️ It is not obviously safe. At 1440 px with the nav sidebar, a w: 3 tile is roughly 280 px, and the longest title — "Applications Awaiting Action" — already occupies most of a w: 4 tile's width. It may wrap to two lines, or the descriptions ("Rounds scheduled Monday to Sunday, cancelled ones excluded.") may push the tiles taller and cost back what the row saved. Measure before choosing; a wrapped title on every employer's home screen is worse than a cropped chart in one screenshot.
Other options if w: 3 measures badly:
- Leave row 0 at three tiles and give the fourth a companion — there is no obvious second KPI to invent, so this is only worth it if one is genuinely wanted.
- Move
avg_days_to_offer to x: 8, y: 0 and let one of the existing three drop to row 2 — same problem, different tile alone.
- Accept the 3 + 1 and reduce
pipeline_by_stage.h so more of it clears the fold.
If it changes
docs/screenshots/03-hiring-home-overview.png gets re-taken once more, and its caption loses the "cropped past the fold" clause. That is the correct order — layout first, then the shot — and is why #76 did not reach for it.
Scope
src/dashboards/employer-hiring.dashboard.ts only. ⛔ No dataset, measure, object or hook change: the numbers are correct and were verified twice (#68, #76). This is purely where the tiles sit.
Acceptance
- Boot, sign in as
admin@quillstone.example, and show the dashboard at 1440 × 900 with a browser screenshot — the acceptance is what fits above the fold, so a description will not do.
- Show the longest tile title not wrapped (or, if it wraps, say so and pick a different option rather than shipping it).
- The five numbers must not move: 3 · 18 · 6 · 30.0 · pipeline 10 / 8 / 5 / 2 / 1 (+1 rejected). ⚠️ To re-measure them, the analytics filter key is
selection.runtimeFilter — body.filter, selection.filter and selection.where are accepted with HTTP 200 and silently ignored, which yields a plausible wrong number.
- Re-take
03-hiring-home-overview.png and update its caption in the same PR.
Noticed while reviewing #76 (the screenshot re-take). Not a defect in either #55 or #66 — a layout consequence neither card was scoped to decide.
What it looks like
src/dashboards/employer-hiring.dashboard.tsplaces its four KPI tiles atw: 4each:open_jobs{ x: 0, y: 0, w: 4, h: 2 }awaiting_action{ x: 4, y: 0, w: 4, h: 2 }interviews_this_week{ x: 8, y: 0, w: 4, h: 2 }avg_days_to_offer{ x: 0, y: 2, w: 4, h: 2 }pipeline_by_stage{ x: 0, y: 4, w: 12, h: 5 }Three tiles fill row 0 across all 12 columns, so the fourth necessarily opens row 2 — alone, with three empty column-slots beside it — and the bar chart is displaced to row 4.
At the set's standard 1440 × 900 viewport that puts Pipeline by Stage past the fold: the freshly re-taken
docs/screenshots/03-hiring-home-overview.pngshows its title, description, y-axis and the tops of two bars, and nothing else. #76's caption handles that honestly (it says the bars are cropped and cites the values from the dataset query, as01and02already do), but the caption is working around a layout rather than describing a good one.The obvious fix, and why it is a guess
Four
w: 3tiles on row 0, pipeline back toy: 2. That restores a single KPI row and brings the whole chart above the fold.w: 3tile is roughly 280 px, and the longest title — "Applications Awaiting Action" — already occupies most of aw: 4tile's width. It may wrap to two lines, or the descriptions ("Rounds scheduled Monday to Sunday, cancelled ones excluded.") may push the tiles taller and cost back what the row saved. Measure before choosing; a wrapped title on every employer's home screen is worse than a cropped chart in one screenshot.Other options if
w: 3measures badly:avg_days_to_offertox: 8, y: 0and let one of the existing three drop to row 2 — same problem, different tile alone.pipeline_by_stage.hso more of it clears the fold.If it changes
docs/screenshots/03-hiring-home-overview.pnggets re-taken once more, and its caption loses the "cropped past the fold" clause. That is the correct order — layout first, then the shot — and is why #76 did not reach for it.Scope
src/dashboards/employer-hiring.dashboard.tsonly. ⛔ No dataset, measure, object or hook change: the numbers are correct and were verified twice (#68, #76). This is purely where the tiles sit.Acceptance
admin@quillstone.example, and show the dashboard at 1440 × 900 with a browser screenshot — the acceptance is what fits above the fold, so a description will not do.selection.runtimeFilter—body.filter,selection.filterandselection.whereare accepted with HTTP 200 and silently ignored, which yields a plausible wrong number.03-hiring-home-overview.pngand update its caption in the same PR.