From 500516b0fdd5c6defe3f6b43f68872ec826c628b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?=
 <mateusz.gruszczynski@firma.interia.pl>
Date: Thu, 3 Sep 2026 09:30:20 +0200
Subject: [PATCH] v0.11.4-layout

---
 FILE_MANIFEST.sha256 |  4 ++--
 mock/styles.css      | 29 ++++++++++++++++++++++++++---
 web/styles.css       | 29 ++++++++++++++++++++++++++---
 3 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/FILE_MANIFEST.sha256 b/FILE_MANIFEST.sha256
index a6cb044..27643b2 100644
--- a/FILE_MANIFEST.sha256
+++ b/FILE_MANIFEST.sha256
@@ -31,7 +31,7 @@ cca65482e36d48035aca178121a378fe7d578d600acff267ae81a6399c0da653  ./home-assista
 d8459024f04ca514bd8e9d6bd3af872fb942fd85a7cdd5583f4a9d28aab6faba  ./make_zip.py
 1e7b1bcf4194abfb8bad0d601268af0547d58541731e98b74a3500d7629d0be0  ./mock/index.html
 007c78e0cb404778985980b23bb5f8bbc7a8f04c80015204e24c321970e3b15e  ./mock/mock.js
-75999d965ea56a2cd961afe5771e6e9b1be513fab1dcafb480fbe9c0c232e7df  ./mock/styles.css
+11034c405898fe345b308cfb7da094c1dd995576c138241e19b29b063b51e6ba  ./mock/styles.css
 d505d793ce7cc9485b45b78bba1c0d51887adc7451ab59a42702946e5b991382  ./mock/theme-init.js
 b14233a8987e53bbbdd6770386ba10fa166ec25c1e098275c173c544b37846fc  ./presets/bedroom_window_night.json
 1960841119c0b673fb2f03621b32237552fd828045304cd221401214b997c910  ./presets/device_resilience.json
@@ -194,6 +194,6 @@ c8c82e88c3715b1bfabf155e36266a4c94f5e2fc03eb39dcdd9d08a1985a997c  ./web/js/route
 bdeb55546a1dff5e5bdfde4b114d6330f025df1b62e528bf18a93ad6dd4c3e83  ./web/js/settings-ui.js
 aa6a2ba22648de44547efd09f41c4335ebe38ed564f4684e942d7827df40f1a2  ./web/js/settings.js
 6b653e4fe2d4db4ffae6ff8f39b8ce57a10a990dc0000ee4aae51d949afadd52  ./web/manifest.webmanifest
-75999d965ea56a2cd961afe5771e6e9b1be513fab1dcafb480fbe9c0c232e7df  ./web/styles.css
+11034c405898fe345b308cfb7da094c1dd995576c138241e19b29b063b51e6ba  ./web/styles.css
 ae1b03f30b494f474a781a5d32072f1e73eba2b7c768109fc1cc8028cb6662a4  ./web/sw.js
 d505d793ce7cc9485b45b78bba1c0d51887adc7451ab59a42702946e5b991382  ./web/theme-init.js
diff --git a/mock/styles.css b/mock/styles.css
index f4d6504..4641eb1 100644
--- a/mock/styles.css
+++ b/mock/styles.css
@@ -4683,7 +4683,30 @@ body.simulation-standalone [data-view="simulation"] {
 
 #dashboardZones,
 #dashboardDevices {
-  align-items: start;
+  align-items: stretch;
+}
+
+/* Primary control/configuration cards need room for labels and actions.
+   Keep at most two cards per row and collapse naturally to one before
+   the card internals start clipping. */
+#dashboardZones,
+#dashboardDevices,
+#deviceList,
+#zoneList {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
+  grid-auto-rows: 1fr;
+}
+
+#dashboardZones > article,
+#dashboardDevices > article,
+#deviceList > article,
+#zoneList > article {
+  height: 100%;
+}
+
+#deviceList .device-card .card-menu {
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
 .quick-thermostat-control {
@@ -6527,7 +6550,7 @@ button { border-radius:11px; }
   .mobile-nav-only { display:none !important; }
   .desktop-nav-only { display:flex; }
   .bottom-nav {
-    top:calc(var(--topbar-height,72px) + 14px); bottom:14px; left:max(14px,calc((100vw - 1440px)/2));
+    top:calc(var(--topbar-height,72px) + 14px); bottom:14px; left:max(14px,calc((100vw - 1500px)/2));
     display:flex; flex-direction:column; gap:2px; width:190px; max-height:calc(100dvh - var(--topbar-height,72px) - 28px);
     padding:10px; overflow-y:auto; border-radius:16px; scrollbar-width:thin;
   }
@@ -6537,7 +6560,7 @@ button { border-radius:11px; }
   .bottom-nav button span { display:grid; place-items:center; flex:0 0 24px; width:24px; font-size:17px; }
   .bottom-nav button b { min-width:0; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
   .bottom-nav button.active { background:var(--accent-soft); }
-  main { width:min(1440px,100%); padding-left:222px; padding-right:24px; }
+  main { width:min(1500px,100%); padding-left:222px; padding-right:24px; }
 }
 
 @media (max-width:760px) {
diff --git a/web/styles.css b/web/styles.css
index f4d6504..4641eb1 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -4683,7 +4683,30 @@ body.simulation-standalone [data-view="simulation"] {
 
 #dashboardZones,
 #dashboardDevices {
-  align-items: start;
+  align-items: stretch;
+}
+
+/* Primary control/configuration cards need room for labels and actions.
+   Keep at most two cards per row and collapse naturally to one before
+   the card internals start clipping. */
+#dashboardZones,
+#dashboardDevices,
+#deviceList,
+#zoneList {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
+  grid-auto-rows: 1fr;
+}
+
+#dashboardZones > article,
+#dashboardDevices > article,
+#deviceList > article,
+#zoneList > article {
+  height: 100%;
+}
+
+#deviceList .device-card .card-menu {
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
 .quick-thermostat-control {
@@ -6527,7 +6550,7 @@ button { border-radius:11px; }
   .mobile-nav-only { display:none !important; }
   .desktop-nav-only { display:flex; }
   .bottom-nav {
-    top:calc(var(--topbar-height,72px) + 14px); bottom:14px; left:max(14px,calc((100vw - 1440px)/2));
+    top:calc(var(--topbar-height,72px) + 14px); bottom:14px; left:max(14px,calc((100vw - 1500px)/2));
     display:flex; flex-direction:column; gap:2px; width:190px; max-height:calc(100dvh - var(--topbar-height,72px) - 28px);
     padding:10px; overflow-y:auto; border-radius:16px; scrollbar-width:thin;
   }
@@ -6537,7 +6560,7 @@ button { border-radius:11px; }
   .bottom-nav button span { display:grid; place-items:center; flex:0 0 24px; width:24px; font-size:17px; }
   .bottom-nav button b { min-width:0; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
   .bottom-nav button.active { background:var(--accent-soft); }
-  main { width:min(1440px,100%); padding-left:222px; padding-right:24px; }
+  main { width:min(1500px,100%); padding-left:222px; padding-right:24px; }
 }
 
 @media (max-width:760px) {