From edd8cd01c131f4f14a60820540433931f3f5a645 Mon Sep 17 00:00:00 2001
From: root <root@claude.deathstar-home.one>
Date: Fri, 17 Apr 2026 15:04:47 -0500
Subject: [PATCH] Group climate controls together on Controls page

Thermostats now render in their own grid row at the top, side-by-side
with equal min-height. Alarm, lights, and locks follow in a separate
grid below.
---
 src/components/controls/ControlsOverlay.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/controls/ControlsOverlay.tsx b/src/components/controls/ControlsOverlay.tsx
index f7afdac..65da2a3 100644
--- a/src/components/controls/ControlsOverlay.tsx
+++ b/src/components/controls/ControlsOverlay.tsx
@@ -25,12 +25,21 @@ export function ControlsOverlay() {
         </button>
       </header>
 
-      <div className="flex-1 overflow-auto p-5">
+      <div className="flex-1 overflow-auto p-5 space-y-5">
+        {/* Climate controls — grouped together, equal width */}
+        {config.thermostats.length > 0 && (
+          <div className="grid grid-cols-2 gap-4">
+            {config.thermostats.map((thermostat) => (
+              <div key={thermostat.entityId} className="min-h-[200px]">
+                <ThermostatWidget config={thermostat} />
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Alarm, Lights, Locks */}
         <div className="grid grid-cols-2 gap-4">
           {config.alarm && <AlarmoPanel />}
-          {config.thermostats.map((thermostat) => (
-            <ThermostatWidget key={thermostat.entityId} config={thermostat} />
-          ))}
           {config.lights.length > 0 && <LightsWidget />}
           {config.locks.length > 0 && <LocksWidget />}
         </div>