From fc4999b9d27959cb7fc21839e4e49126a65b5cfe Mon Sep 17 00:00:00 2001
From: nick <coachward0742@gmail.com>
Date: Mon, 8 Jun 2026 11:07:48 -0600
Subject: [PATCH] webui: render temperature settings as mobile cards

---
 .../overland-controller.ino                   | 27 ++++++++++++-------
 tests/test_http_api_contract.py               | 14 ++++++++++
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/firmware/esp32/overland-controller/overland-controller.ino b/firmware/esp32/overland-controller/overland-controller.ino
index b2039ca..8cc5cb6 100644
--- a/firmware/esp32/overland-controller/overland-controller.ino
+++ b/firmware/esp32/overland-controller/overland-controller.ino
@@ -1149,21 +1149,30 @@ function renderConfigControls(data){
   const tempBox=$("tempConfigList");
   if(tempBox){
     tempBox.innerHTML=temps.map((t,i)=>`
-      <div class="configrow tempConfigRow">
-        <label>${t.id}</label>
+      <div class="tempConfigCard">
+        <div class="tempConfigTop">
+          <div class="tempConfigTitle">Temp Slot ${i+1}</div>
+          <button class="danger tempClear" onclick="clearTempAssignment('${t.id}')">Clear Assignment</button>
+        </div>
+
+        <label class="inputHelp" for="tempName${i}">Name</label>
         <input id="tempName${i}" value="${t.name||""}" placeholder="Temp name">
-        <div class="checkGroup">
-          <label class="checkPill">
+
+        <div>
+          <div class="inputHelp">Address</div>
+          <div class="tempConfigAddress">${t.address||"unassigned"}</div>
+        </div>
+
+        <div class="tempConfigControls">
+          <label class="tempCheck">
             <input id="tempEnabled${i}" type="checkbox" ${t.enabled?"checked":""} onchange="saveTempConfig()">
-            On
+            Enabled
           </label>
-          <label class="checkPill">
+          <label class="tempCheck">
             <input id="tempWeather${i}" type="checkbox" ${t.weather?"checked":""} onchange="saveTempConfig()">
-            Weather
+            Weather Badge
           </label>
-          <button class="off" onclick="clearTempAssignment('${t.id}')">Clear</button>
         </div>
-        <div class="tempAddress">Address: ${t.address||"unassigned"}</div>
       </div>`).join("");
   }
 }
diff --git a/tests/test_http_api_contract.py b/tests/test_http_api_contract.py
index b2dab49..a544422 100644
--- a/tests/test_http_api_contract.py
+++ b/tests/test_http_api_contract.py
@@ -538,3 +538,17 @@ def test_embedded_webui_mobile_temperature_config_cards():
     assert "Clear Assignment" in source
     assert "Weather Badge" in source
     assert "@media(max-width:700px)" in source
+
+
+def test_embedded_webui_temp_config_uses_mobile_cards():
+    source = firmware_source()
+    start = source.index('const tempBox=$("tempConfigList");')
+    end = source.index("async function saveRelayConfig", start)
+    body = source[start:end]
+
+    assert "tempConfigCard" in body
+    assert "Temp Slot " in body
+    assert "Clear Assignment" in body
+    assert "Weather Badge" in body
+    assert "configrow tempConfigRow" not in body
+    assert "Address:" not in body