From 5f4c36733afd92c8363e17ed5e425b9bfc64670d Mon Sep 17 00:00:00 2001
From: SandObserver <260779319+SandObserver@users.noreply.github.com>
Date: Wed, 12 Aug 2026 22:11:19 -0400
Subject: [PATCH] Fix: cap the desktop grid scale at the design size

Above the design width the grid, gaps and tile height grew with the
viewport, enlarging icons, labels and widget cards past the sizes every
desktop layout value was drawn against.

Cap each grid custom property at its design value, so the proportional
system only scales down for narrower viewports.
---
 CHANGELOG.md         |  4 ++--
 ui/css/dashboard.css | 15 ++++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88b4261f..40b7713d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,8 +19,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Dashboard tiles scale with the window, so six columns stay square on a tablet
-  and fill the width of a large screen.
+- Dashboard tiles scale down with the window, so six columns stay square on a
+  tablet. Sizes above the design width are unchanged.
 
 - Settings keeps its sidebar on a tablet, narrowed.
 
diff --git a/ui/css/dashboard.css b/ui/css/dashboard.css
index 16a9efa5..cee9d598 100644
--- a/ui/css/dashboard.css
+++ b/ui/css/dashboard.css
@@ -65,22 +65,23 @@
     /* ── Desktop grid scale ──
        Six columns at every width. The grid, the gaps and the tile height are
        one proportional system derived from the viewport, so six columns stay
-       square on a tablet and grow on a large screen instead of sitting in a
-       1041px island.
+       square on a tablet. Above the design width the system stops: each min()
+       is capped at its design value, so a large screen gets the same sizes a
+       desktop has always had.
 
        The design width is 1041px, which over six columns and a 25px gap gives a
        152.67px column, the width the 152px tile height and every value in
        WIDGET_HEIGHTS were drawn against. Each ratio below is that value over
-       1041. The upper bound of each min() is the design value times 1.25.
+       1041.
 
        dashboard.js reads --tile-h and --row-gap back to paginate. Changing a
        ratio here without changing DESIGN_TILE there breaks the page breaks. */
     :root {
       --grid-avail:calc(100vw - 88px);
-      --grid-w:min(1301px, var(--grid-avail));
-      --col-gap:min(31.25px, calc(var(--grid-avail) * 0.024015));
-      --row-gap:min(37.5px, calc(var(--grid-avail) * 0.028818));
-      --tile-h:min(190px, calc(var(--grid-avail) * 0.146013));
+      --grid-w:min(1041px, var(--grid-avail));
+      --col-gap:min(25px, calc(var(--grid-avail) * 0.024015));
+      --row-gap:min(30px, calc(var(--grid-avail) * 0.028818));
+      --tile-h:min(152px, calc(var(--grid-avail) * 0.146013));
     }
     /* Measured by dashboard.js. An element resolves these to pixels; reading the
        custom properties themselves returns their unresolved text. */