From 7377fe3b6b7a6963e27c4ff00f531fa6c6dbf627 Mon Sep 17 00:00:00 2001
From: Jens Ahrensfeld <jens@jayfield.org>
Date: Fri, 3 Jul 2026 20:03:52 +0200
Subject: [PATCH] fix: move heater/stirrer connection status next to the panel
 heading

The Connected/Disconnected badge, F/W version text, and both Connect/
Disconnect buttons were crammed into one row, clipping the Disconnect
button off-panel. Move the status badge into the h3 heading itself
(right-aligned) so the row below has room for the F/W text and both
buttons.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YaPLuRPpyjWcwhMvCvpHCL
---
 web/app.js     | 2 +-
 web/index.html | 6 ++----
 web/style.css  | 9 +++++++++
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/app.js b/web/app.js
index e6f537e..50d14d8 100644
--- a/web/app.js
+++ b/web/app.js
@@ -543,7 +543,7 @@ function updateSudActions() {
 function updateDeviceStatus(prefix, isConnected, firmware, simulated) {
 	const statusEl = document.getElementById(`${prefix}-status`);
 	statusEl.textContent = isConnected ? 'Connected' : 'Disconnected';
-	statusEl.className = isConnected ? 'status-connected' : 'status-disconnected';
+	statusEl.className = `panel-status ${isConnected ? 'status-connected' : 'status-disconnected'}`;
 	document.getElementById(`${prefix}-firmware`).textContent = firmware ? `F/W ${firmware}` : '';
 	const connectBtn = document.getElementById(`btn-${prefix}-connect`);
 	const disconnectBtn = document.getElementById(`btn-${prefix}-disconnect`);
diff --git a/web/index.html b/web/index.html
index 59c03dc..d793444 100644
--- a/web/index.html
+++ b/web/index.html
@@ -50,9 +50,8 @@
 			</label>
 		</div>
 		<div class="panel">
-			<h3>Heater</h3>
+			<h3>Heater <span id="heater-status" class="panel-status status-disconnected">Disconnected</span></h3>
 			<div class="device-status-row">
-				<span id="heater-status" class="status-disconnected">Disconnected</span>
 				<span id="heater-firmware" class="device-firmware"></span>
 				<button id="btn-heater-connect">Connect</button>
 				<button id="btn-heater-disconnect" disabled>Disconnect</button>
@@ -68,9 +67,8 @@
 			</label>
 		</div>
 		<div class="panel">
-			<h3>Stirrer</h3>
+			<h3>Stirrer <span id="stirrer-status" class="panel-status status-disconnected">Disconnected</span></h3>
 			<div class="device-status-row">
-				<span id="stirrer-status" class="status-disconnected">Disconnected</span>
 				<span id="stirrer-firmware" class="device-firmware"></span>
 				<button id="btn-stirrer-connect">Connect</button>
 				<button id="btn-stirrer-disconnect" disabled>Disconnect</button>
diff --git a/web/style.css b/web/style.css
index 383afc5..c119d1e 100644
--- a/web/style.css
+++ b/web/style.css
@@ -307,6 +307,9 @@ header#connection-bar {
     box-shadow: 0 2px 8px rgba(0,0,0,0.45);
 }
 .panel h3 {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
     margin: 0 0 0.5em 0;
     font-size: 0.85em;
     text-transform: uppercase;
@@ -315,6 +318,11 @@ header#connection-bar {
     border-bottom: 1px solid var(--border);
     padding-bottom: 0.35em;
 }
+.panel-status {
+    text-transform: none;
+    letter-spacing: normal;
+    font-size: 1rem;
+}
 .panel label {
     display: flex;
     flex-direction: column;
@@ -336,6 +344,7 @@ header#connection-bar {
 .device-status-row {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 0.6em;
     margin: 0.4em 0;
     font-size: 0.9em;