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

@@ -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>