From 97813eb12fedda517d0e3b23c72eda1cb706b0c2 Mon Sep 17 00:00:00 2001
From: Jos Nienhuis <6952249+joszz@users.noreply.github.com>
Date: Sun, 11 Oct 2026 09:33:54 +0200
Subject: [PATCH] fix(ui): tiles in a row share one height, and never get too
 narrow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since tile text wraps instead of being cut off (#447), a tile with a
longer label or value grew taller than its neighbours. The grid did
stretch each row, but on the dashboard and statistics the grid item is
a wrapper (the info button's, or the edit mode slot), and the card
inside never filled it. The height is now passed down through those
wrappers, so every tile in a row is the same height, in edit mode too.

The fixed column counts (4, 6, 8 and 12 beside the sidebar, 3 on
tablets) made tiles as narrow as 173px, where readings such as
"71% · Active" broke over two lines and made their whole row taller.
The grid now fits as many tiles as it can at 13rem or wider, so from
700px up every row is a single 58px line. Phones keep two columns.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/assets/main.css | 39 ++++++++++++++++++------------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 0b9d46f2..0329c715 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -386,12 +386,31 @@ body,
   gap: 0.6rem;
 }
 
+/* Beside the sidebar, as many tiles to a row as fit at 13rem or wider: room for a reading such as
+   "Off · 21.0 °C" or "71% · Active" on one line, so a row is rarely taller than its neighbours. */
 .status-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: 1rem;
 }
 
+/* A grid row stretches its items to the tallest, but on the dashboard and statistics the item is
+   a wrapper (the info button's, and in edit mode the slot's) rather than the card. The height is
+   passed down through them, so every tile in a row is as tall as the one with the longest label. */
+.status-grid > .card-info-wrap,
+.status-grid > .card-slot,
+.status-grid > .card-slot > .card-slot__content {
+  display: flex;
+  flex-direction: column;
+}
+
+.status-grid > .card-slot > .card-slot__content,
+.status-grid > .card-info-wrap > .status-card,
+.status-grid > .card-slot > .card-slot__content > .status-card,
+.status-grid > .card-slot > .card-slot__content > .card-slot__placeholder {
+  flex: 1;
+}
+
 .status-card {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
@@ -1992,19 +2011,11 @@ textarea.form-control {
   :root {
     --content-padding: 1.5rem;
   }
-
-  .status-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
 }
 
 /* ── Large desktop (1440px+) ──────────────────────────────── */
 
 @media (width >= 1440px) {
-  .status-grid {
-    grid-template-columns: repeat(6, 1fr);
-  }
-
   .overview-row__map {
     flex: 1.4 1 420px;
     max-width: 560px;
@@ -2014,21 +2025,11 @@ textarea.form-control {
 /* ── Full-HD and above (1920px+) ──────────────────────────── */
 
 @media (width >= 1920px) {
-  .status-grid {
-    grid-template-columns: repeat(8, 1fr);
-  }
-
   .overview-row__map {
     max-width: 680px;
   }
 }
 
-@media (width >= 2500px) {
-  .status-grid {
-    grid-template-columns: repeat(12, 1fr);
-  }
-}
-
 /* ── Sidebar footer (user + logout) ──────────────────────── */
 
 .sidebar-footer {