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 @@
-
Heater
+
Heater Disconnected
- Disconnected
@@ -68,9 +67,8 @@
-
Stirrer
+
Stirrer Disconnected
- Disconnected
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;