From 8a6f428c1b6d6258b68c2004a9ed66d98359cb5b Mon Sep 17 00:00:00 2001
From: dschlueter <dschlueter@kitux.de>
Date: Fri, 26 Jun 2026 15:32:42 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20SOS-Button=20auf=20Quadrat=20in=20H?=
 =?UTF-8?q?=C3=B6he=20der=20Sprachauswahl=20verkleinern=20(32px)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der prominente SOS-Button war zu groß. Jetzt ein kompaktes 32x32-Quadrat
(h-8 w-8) — exakt so hoch wie die Sprachauswahl daneben (gemessen 32px),
weiterhin rot gefüllt mit weißem „SOS". Der volle Titel passt wieder ohne
Kürzung.

Da ein 32px-Quadrat keine langen Statuswörter fasst, läuft das Feedback jetzt
über Farbe/Symbol: „SOS" (rot) → pulsiert beim Rufen → „✓" (grün) = Alarm
ausgelöst → „!" bei Fehler, dann zurück. Bestätigungsdialog unverändert.

Bump app.js v=49 -> v=50. Verifiziert via Headless-Chrome (SOS 32x32 == lang 32).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/web/app.js     | 19 +++++++++++--------
 app/web/index.html |  4 ++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/web/app.js b/app/web/app.js
index 9845881..01548cb 100644
--- a/app/web/app.js
+++ b/app/web/app.js
@@ -2247,27 +2247,30 @@ function deviceInfo() {
 
 // Sichtbarer Zustand am SOS-Button selbst: idle | calling | done | error.
 // So erkennt der Senior unmittelbar am Knopf, dass der Alarm ausgelöst wurde.
+// Button bleibt ein kleines Quadrat (so groß wie die Sprachauswahl) -> Feedback
+// über Farbe/Symbol statt langer Wörter, damit es nicht aus der Form läuft.
 function setSosState(state) {
   if (!emergencyBtn) return;
   emergencyBtn.classList.remove(
-    "bg-red-600", "hover:bg-red-700", "bg-green-600", "animate-pulse"
+    "bg-red-600", "hover:bg-red-700", "bg-green-600", "animate-pulse",
+    "text-sm", "text-lg"
   );
   if (state === "calling") {
-    emergencyBtn.textContent = "Rufe …";
+    emergencyBtn.textContent = "SOS";          // pulsiert = „wird gerufen“
     emergencyBtn.disabled = true;
-    emergencyBtn.classList.add("bg-red-600", "animate-pulse");
+    emergencyBtn.classList.add("bg-red-600", "animate-pulse", "text-sm");
   } else if (state === "done") {
-    emergencyBtn.textContent = "Gerufen ✓";
+    emergencyBtn.textContent = "✓";            // grün + Haken = Alarm raus
     emergencyBtn.disabled = true;
-    emergencyBtn.classList.add("bg-green-600");
+    emergencyBtn.classList.add("bg-green-600", "text-lg");
   } else if (state === "error") {
-    emergencyBtn.textContent = "Fehler";
+    emergencyBtn.textContent = "!";
     emergencyBtn.disabled = false;
-    emergencyBtn.classList.add("bg-red-600", "hover:bg-red-700");
+    emergencyBtn.classList.add("bg-red-600", "hover:bg-red-700", "text-lg");
   } else { // idle
     emergencyBtn.textContent = "SOS";
     emergencyBtn.disabled = false;
-    emergencyBtn.classList.add("bg-red-600", "hover:bg-red-700");
+    emergencyBtn.classList.add("bg-red-600", "hover:bg-red-700", "text-sm");
   }
 }
 
diff --git a/app/web/index.html b/app/web/index.html
index edceaee..99b3264 100644
--- a/app/web/index.html
+++ b/app/web/index.html
@@ -229,7 +229,7 @@
     <img src="/favicon.svg?v=1" alt="" class="w-7 h-7 shrink-0" />
     <h1 class="flex-1 truncate font-semibold text-base">Voice&nbsp;Assistant</h1>
     <button type="button" id="emergency-btn" title="Hilfe rufen" aria-label="Hilfe rufen"
-      class="shrink-0 h-11 px-4 grid place-items-center rounded-lg bg-red-600 hover:bg-red-700 text-white font-extrabold tracking-wide text-lg shadow-sm whitespace-nowrap transition-colors disabled:opacity-100">SOS</button>
+      class="shrink-0 h-8 w-8 grid place-items-center rounded-lg bg-red-600 hover:bg-red-700 text-white font-extrabold text-sm leading-none shadow-sm transition-colors disabled:opacity-100">SOS</button>
     <select id="lang-sel" title="Sprache"
       class="text-sm rounded-lg border border-slate-300 dark:border-slate-600 bg-transparent px-2 py-1.5">
       <option value="de">🇩🇪 DE</option>
@@ -386,6 +386,6 @@
     </div>
   </div>
 
-  <script src="/app.js?v=49"></script>
+  <script src="/app.js?v=50"></script>
 </body>
 </html>