From 5c2a301f1f112bb54110eda5c9b3e1d1733b7968 Mon Sep 17 00:00:00 2001
From: Jens Ahrensfeld <jens@jayfield.org>
Date: Sat, 27 Jun 2026 21:35:25 +0200
Subject: [PATCH] Redesign browser GUI: drop tabs, 3-column layout, labels
 above sliders

- Remove tab system (nav#tabs, tab-btn, tab-content) from HTML/CSS/JS
- Permanent 3-column grid: manual controls (left, 16em) | LCD+pot (center) | progress (right, fills remaining)
- LCD panel stacks above pot SVG in center column, both hidden until connected
- Step plates no longer max-width capped, fill the right column
- Slider labels moved above the slider+readout row via flex-direction: column

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DF16nV2ispNw1C9SbvqbRQ
---
 web/app.js     |  9 -----
 web/index.html | 99 ++++++++++++++++++++++++++------------------------
 web/style.css  | 71 ++++++++++++++----------------------
 3 files changed, 80 insertions(+), 99 deletions(-)

diff --git a/web/app.js b/web/app.js
index 9cc9d14..7ea1482 100644
--- a/web/app.js
+++ b/web/app.js
@@ -875,15 +875,6 @@ document.getElementById('sud-message-ok').addEventListener('click', () => {
 	sendMsg('Sud', {Confirm: true});
 });
 
-document.querySelectorAll('.tab-btn').forEach((btn) => {
-	btn.addEventListener('click', () => {
-		document.querySelectorAll('.tab-btn').forEach((b) => b.classList.remove('active'));
-		document.querySelectorAll('.tab-content').forEach((c) => c.classList.remove('active'));
-		btn.classList.add('active');
-		document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
-	});
-});
-
 setInterval(() => {
 	blinkOn = !blinkOn;
 	stepPlates.forEach(applyLedColor);
diff --git a/web/index.html b/web/index.html
index e58f177..f2cd21e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -22,6 +22,54 @@
 	</span>
 </header>
 
+<main id="layout">
+
+<section id="col-manual">
+	<div class="panel">
+		<h3>Controller</h3>
+		<label>Temperature [&deg;C]
+			<div class="slider-row">
+				<input type="range" id="temp-soll" min="0" max="100" step="1">
+				<span id="temp-soll-readout">--</span>
+			</div>
+		</label>
+		<label>Heat rate [&deg;C/min]
+			<input type="number" id="heatrate-soll" min="0" max="3" step="0.1">
+		</label>
+	</div>
+	<div class="panel">
+		<h3>Heater</h3>
+		<label>Power [W]
+			<div class="slider-row">
+				<input type="range" id="heater-power" min="0" max="100" step="1">
+				<span id="heater-power-readout">--</span>
+			</div>
+		</label>
+	</div>
+	<div class="panel">
+		<h3>Stirrer</h3>
+		<label>Speed [%]
+			<div class="slider-row">
+				<input type="range" id="stirrer-speed" min="0" max="100" step="1">
+				<span id="stirrer-speed-readout">--</span>
+			</div>
+		</label>
+	</div>
+	<div class="panel">
+		<h3>Environment</h3>
+		<label>Ambient [&deg;C]
+			<input type="number" id="ambient-temp" step="0.1">
+		</label>
+		<div id="pot-reset-row" class="hidden">
+			<label>Pot [&deg;C]
+				<input type="number" id="pot-temp" step="0.1">
+			</label>
+			<button id="btn-pot-reset">Reset</button>
+		</div>
+	</div>
+</section>
+
+<div id="col-center">
 <div id="lcd-pot-row">
 <div id="lcd-panel">
 	<div class="lcd-row lcd-header">
@@ -201,55 +249,12 @@
   </svg>
 </div>
 </div><!-- #lcd-pot-row -->
+</div><!-- #col-center -->
 
-<nav id="tabs">
-	<button class="tab-btn active" data-tab="manual">Manual</button>
-	<button class="tab-btn" data-tab="progress">Progress</button>
-</nav>
+<section id="col-progress">
+	<div id="step-plates"></div>
+</section>
 
-<main>
-	<section id="tab-manual" class="tab-content active">
-		<div class="panel">
-			<h3>Controller</h3>
-			<label>Temperature [&deg;C]
-				<input type="range" id="temp-soll" min="0" max="100" step="1">
-				<span id="temp-soll-readout">--</span>
-			</label>
-			<label>Heat rate [&deg;C/min]
-				<input type="number" id="heatrate-soll" min="0" max="3" step="0.1">
-			</label>
-		</div>
-		<div class="panel">
-			<h3>Heater</h3>
-			<label>Power [W]
-				<input type="range" id="heater-power" min="0" max="100" step="1">
-				<span id="heater-power-readout">--</span>
-			</label>
-		</div>
-		<div class="panel">
-			<h3>Stirrer</h3>
-			<label>Speed [%]
-				<input type="range" id="stirrer-speed" min="0" max="100" step="1">
-				<span id="stirrer-speed-readout">--</span>
-			</label>
-		</div>
-		<div class="panel">
-			<h3>Environment</h3>
-			<label>Ambient [&deg;C]
-				<input type="number" id="ambient-temp" step="0.1">
-			</label>
-			<div id="pot-reset-row" class="hidden">
-				<label>Pot [&deg;C]
-					<input type="number" id="pot-temp" step="0.1">
-				</label>
-				<button id="btn-pot-reset">Reset</button>
-			</div>
-		</div>
-	</section>
-
-	<section id="tab-progress" class="tab-content">
-		<div id="step-plates"></div>
-	</section>
 </main>
 
 <dialog id="sud-message-dialog">
diff --git a/web/style.css b/web/style.css
index af5b689..80711b7 100644
--- a/web/style.css
+++ b/web/style.css
@@ -114,9 +114,9 @@ header#connection-bar {
 
 #lcd-panel {
     display: grid;
-    grid-template-columns: 11em 6em 6em;
-    gap: 0.25em 1em;
-    max-width: 32em;
+    grid-template-columns: 9em 4em 4em;
+    gap: 0.25em 0.5em;
+    font-size: 1.1em;
 }
 .lcd-row    { display: contents; }
 .lcd-header { font-weight: bold; color: var(--text-muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; }
@@ -133,16 +133,27 @@ header#connection-bar {
     border-radius: 3px;
 }
 
-/* --- LCD + pot row --- */
+/* --- 3-column layout --- */
+
+#layout {
+    display: grid;
+    grid-template-columns: 16em auto 1fr;
+    gap: 1.5em;
+    align-items: start;
+    margin-top: 1em;
+}
+
+#col-progress { overflow-y: auto; }
+
+/* --- LCD + pot (center column) --- */
 
 #sud-status-line, #env-status-line { visibility: hidden; }
 
 #lcd-pot-row {
     display: flex;
+    flex-direction: column;
     align-items: flex-start;
-    gap: 1.5em;
-    margin: 1em 0;
-    font-size: 2em;
+    gap: 1em;
     visibility: hidden;
 }
 
@@ -217,37 +228,7 @@ header#connection-bar {
     transition: opacity 0.4s;
 }
 
-/* --- Tabs --- */
-
-nav#tabs {
-    margin-top: 1em;
-    border-bottom: 1px solid var(--border);
-}
-.tab-btn {
-    background: none;
-    border: 1px solid transparent;
-    border-bottom: none;
-    color: var(--text-muted);
-    padding: 0.4em 1.1em;
-    cursor: pointer;
-    position: relative;
-    top: 1px;
-    border-radius: 4px 4px 0 0;
-    transition: color 0.15s;
-}
-.tab-btn:hover:not(.active) { color: var(--text); border-color: var(--border); }
-.tab-btn.active {
-    background: var(--surface);
-    color: var(--text);
-    font-weight: bold;
-    border-color: var(--border);
-    border-bottom: 1px solid var(--surface);
-}
-
-.tab-content        { display: none; padding: 1em 0; }
-.tab-content.active { display: block; }
-
-/* --- Manual tab panels --- */
+/* --- Manual panels --- */
 
 .panel {
     background: var(--surface);
@@ -255,7 +236,6 @@ nav#tabs {
     border-radius: 6px;
     padding: 0.8em 1.1em;
     margin-bottom: 0.8em;
-    max-width: 30em;
     box-shadow: 0 2px 8px rgba(0,0,0,0.45);
 }
 .panel h3 {
@@ -269,11 +249,16 @@ nav#tabs {
 }
 .panel label {
     display: flex;
-    align-items: center;
-    gap: 0.6em;
+    flex-direction: column;
+    gap: 0.2em;
     margin: 0.4em 0;
 }
-.panel input[type="range"]    { flex: 1; accent-color: var(--accent); }
+.slider-row {
+    display: flex;
+    align-items: center;
+    gap: 0.6em;
+}
+.slider-row input[type="range"] { flex: 1; accent-color: var(--accent); }
 .panel input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
 .panel input[type="number"]   { width: 6em; }
 
@@ -284,7 +269,7 @@ nav#tabs {
 
 /* --- Progress tab: step plates --- */
 
-#step-plates { display: flex; flex-direction: column; gap: 0.5em; max-width: 38em; }
+#step-plates { display: flex; flex-direction: column; gap: 0.5em; }
 
 .step-plate {
     background: var(--surface);