Add collapsible manual panel to give progress pane more room

Toggle button (top-left of column, always same position) collapses the
manual panel from 16em to 2em with a CSS transition; state persists in
localStorage across reloads.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SH2D4LRuCnhLSzoYerAfJX

web/app.js

@@ -937,4 +937,16 @@ setInterval(() => {
 	stepPlates.forEach(applyLedColor);
 }, 500);
 
+const btnManualToggle = document.getElementById('btn-manual-toggle');
+function setManualCollapsed(collapsed) {
+	document.getElementById('layout').classList.toggle('manual-collapsed', collapsed);
+	btnManualToggle.textContent = collapsed ? '▶' : '◄';
+	btnManualToggle.title = collapsed ? 'Expand manual panel' : 'Collapse manual panel';
+	localStorage.setItem('manualCollapsed', collapsed ? '1' : '0');
+}
+btnManualToggle.addEventListener('click', () => {
+	setManualCollapsed(!document.getElementById('layout').classList.contains('manual-collapsed'));
+});
+setManualCollapsed(localStorage.getItem('manualCollapsed') === '1');
+
 updateSudActions();

web/index.html

@@ -35,6 +35,8 @@
 <main id="layout">
 
 <section id="col-manual">
+	<button id="btn-manual-toggle" title="Collapse manual panel">&#9664;</button>
+	<div id="manual-panels">
 		<div class="panel">
 			<h3>Controller</h3>
 			<label>Temperature [&deg;C]
@@ -80,6 +82,7 @@
 				<button id="btn-pot-reset">Reset</button>
 			</div>
 		</div>
+	</div>
 </section>
 
 <div id="col-center">

web/style.css

@@ -182,6 +182,33 @@ header#connection-bar {
     gap: 1.5em;
     align-items: start;
     margin-top: 1em;
+    transition: grid-template-columns 0.2s ease;
+}
+#layout.manual-collapsed {
+    grid-template-columns: 2em auto 1fr;
+}
+
+/* --- Manual column collapse --- */
+
+#col-manual {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+#btn-manual-toggle {
+    align-self: flex-start;
+    width: 2em;
+    height: 2em;
+    padding: 0;
+    font-size: 0.9em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-bottom: 0.4em;
+}
+#layout.manual-collapsed #manual-panels {
+    display: none;
 }
 
 #col-progress { overflow-y: auto; }