Skip to content

ats_employer_hiring has a 3 + 1 tile layout since the fourth KPI landed, which pushes Pipeline by Stage below the fold #78

Description

@os-sam

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.runtimeFilterbody.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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions