Skip to content

Dashboard: bias content to top with a small capped gap #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kavehtoyser merged 1 commit into from
Jun 29, 2026
Merged

Dashboard: bias content to top with a small capped gap #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion manager/assets/dashboard_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,11 @@ a{color:inherit;text-decoration:none;}
}
.grid{
display:grid;grid-template-columns:2.6fr 0.9fr;gap:1.4rem;align-items:start;
margin-block:auto;width:100%;
width:100%;
/* Bias content toward the top with a small, capped gap below the banner —
the remaining viewport slack falls below, so a few short rows no longer
float to mid-screen with a large empty band above. */
margin-top:clamp(0.5rem, 5vh, 2.5rem);
}

/* ---------- panels ---------- */
Expand Down
7 changes: 5 additions & 2 deletions tests/manager_test/test_ui_redesign.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,10 +176,13 @@ def test_dashboard_grid_widens_services_and_fills_viewport():
# Services hero is wider than the slim Notifications rail
assert "grid-template-columns:2.6fr0.9fr" in css
assert "grid-template-columns:1.85fr1fr" not in css
# Page fills the viewport height (minus the banner) and centers when short
# Page fills the viewport height (minus the banner); content is biased to
# the top with a small, capped gap (not centered, which floated the panels
# to mid-screen and left a large gap above on tall monitors).
assert "min-height:calc(100vh-4rem)" in css
assert "margin-block:auto" in css
assert "box-sizing:border-box" in css
assert "margin-block:auto" not in css # no full-height vertical centering
assert "margin-top:clamp(" in css # small capped top gap on .grid


def test_notifications_panel_has_explanation():
Expand Down
Loading