PR 19708 review
rancher/dashboard PR 19708 (momesgin, “Align empty state spacing in status cards”, issue 7992, v2.16.0), reviewed on 2026-10-26 at da5dffdb9. A follow-up to the status cards from PR 19386: 4 files, +64/−17. Nothing posted to GitHub yet.
Preview: https://rancherpr19708r.mf-created-dashboard.ui.rancher.space/dashboard/c/local/explorer, built from da5dffdb9, backend mf Rancher (v2.16.0)
Approve: nothing to fix
- What it does: in
StatusSummaryCardtheVerticalGapnow renders only with the status bar, so an empty card no longer has a double gap above its message. Both cards wrap theemptyslot in a.emptydiv with the 24px row line-height, and skip it when no slot is passed. - Checked live, master vs PR: all three empty states on the Cluster Dashboard now sit at the same height; cards with data are unchanged on the three pages that use these cards.
- FYI: the one red check is the logging chart e2e, which doesn't touch these cards. It's worth one more rerun before merge, since it failed on both attempts.
Test it yourself
- Open the PR preview and the master preview side by side (log in as
admin, mf password). - Compare “No other unhealthy workloads” in the third card: same position, a little taller on the PR.
- For the main fix, set the namespace filter to
default(no workloads on mf) on both. Deployments shows “None”: 12px under the title on the PR, 24px on master. This changes your admin namespace filter on mf, so set it back after. The screenshots below didn't touch it; they stubbed the API response in the browser instead.
e2e-test (admin, @adminUser, @charts) failed in logging.spec.ts “is installed and a rule created”, on both the first run and the auto-retry (masthead Create, then top-level menu, never found after the install). The spec only goes through Charts → Logging → install → ClusterOutput/ClusterFlow pages, never a status card. The same job is green on every other run today, master included, and the spec has already had three flake fixes. Since it failed twice, a rerun before merge is worth it.
| Case | master | PR 19708 |
|---|---|---|
| Cluster Dashboard, Deployments with no deployments (summary forced empty in the browser) | Message 24px under the title (two gaps) and 16px tall | Message 12px under the title and 24px tall, level with the third card |
| cert-manager overview, Issuers with no issuers (list forced empty) | Same double gap above “No issuers available · Create issuer” | 12px, same as a card with data. Its own .empty div sits inside the new wrapper; it already had line-height 24px, so only the gap changes |
| Cluster Dashboard, “Other, Unhealthy Workloads” with nothing unhealthy (live) | 12px gap (this card never had the extra one), text 16px tall | 12px gap, text 24px tall, same as a row |
| Cards with data: Nodes, Deployments, 4 cert-manager cards, 7 Workloads Overview cards (live) | — | Pixel-identical: same gap count, offsets and card heights |
| Summary card with rows but no status bar (would now lose the gap above the rows) | — | Can't happen: both builders only emit states with count ≥ 1, so rows always come with a bar |
Consumers that pass no empty slot (Workloads Overview, cert-manager certificates card) | Rendered nothing | Still render nothing: no empty wrapper div (v-else-if="$slots.empty"), covered by the new tests |
| CI | 56 of 57 green incl. unit-test, lint, type-check, a11y. Red: e2e admin @charts, logging.spec.ts only (see FYI) |
Preview: https://rancherpr19708r.mf-created-dashboard.ui.rancher.space/dashboard/c/local/explorer — built from da5dffdb9, backend mf Rancher (v2.16.0)
Looks good! I checked it on a preview against master. Empty summary cards (Deployments on the Cluster Dashboard, Issuers on the cert-manager overview) now show their message 12px under the title instead of 24px, and the empty text is as tall as a row, so the three Cluster Dashboard cards line up. Cards with data look the same on the Cluster Dashboard, the cert-manager overview and the Workloads Overview.
The red e2e is logging.spec.ts, which never opens these cards. Could you rerun it before merging?