v0.11.4-layout

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

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) {

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) {