From 07c3f0a7d13ae4ddd8642d9a106115b40529b594 Mon Sep 17 00:00:00 2001
From: Jens Ahrensfeld <jens@jayfield.org>
Date: Mon, 6 Jul 2026 12:19:04 +0200
Subject: [PATCH] style: move user-confirm control under the header's hold-time
 display

Repositions #user-confirm-row from the header's own row to directly
under #header-countdown's "hold" row, sharing a new #countdown-confirm-
col column so header-countdown's 'hidden' toggle (only shown once a
step is active) doesn't hide the confirm control along with it - a
WAIT_USER confirm can happen before that countdown is visible.

Kept the max-width + wrap safety (now min(60vw, 20em)) so a long
confirmation message still wraps instead of pushing the header sideways
on an iPad's narrower viewport, per the earlier upper-right-corner
placement this replaces.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01M2ierBoxW3v7nUbDw3M2pE
---
 web/index.html | 18 ++++++++++--------
 web/style.css  | 17 ++++++++++++++++-
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/web/index.html b/web/index.html
index 84b4379..ed28087 100644
--- a/web/index.html
+++ b/web/index.html
@@ -17,10 +17,16 @@
 			<button id="btn-sud-start" class="transport-btn transport-start" title="Start / Resume">&#9654;</button>
 			<button id="btn-sud-pause" class="transport-btn transport-pause" title="Pause">&#9646;&#9646;</button>
 			<button id="btn-sud-stop"  class="transport-btn transport-stop"  title="Stop">&#9632;</button>
-			<span id="header-countdown" class="hidden">
-				<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">total</span><span id="hdr-total-remaining">-:--:--</span></span>
-				<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">ramp</span><span id="hdr-step-remaining">-:--:--</span></span>
-				<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">hold</span><span id="hdr-hold-remaining">-:--:--</span></span>
+			<span id="countdown-confirm-col">
+				<span id="header-countdown" class="hidden">
+					<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">total</span><span id="hdr-total-remaining">-:--:--</span></span>
+					<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">ramp</span><span id="hdr-step-remaining">-:--:--</span></span>
+					<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">hold</span><span id="hdr-hold-remaining">-:--:--</span></span>
+				</span>
+				<div id="user-confirm-row">
+					<span id="user-confirm-text"></span>
+					<button id="btn-user-confirm" type="button" disabled>Confirm</button>
+				</div>
 			</span>
 		</span>
 	</div>
@@ -30,10 +36,6 @@
 		<input type="file" id="sud-file-input" accept="application/json" class="hidden">
 		<button id="btn-sud-save">Save&hellip;</button>
 	</div>
-	<div id="user-confirm-row">
-		<span id="user-confirm-text"></span>
-		<button id="btn-user-confirm" type="button" disabled>Confirm</button>
-	</div>
 </header>
 
 <main id="layout">
diff --git a/web/style.css b/web/style.css
index 2cbbbba..bfbe989 100644
--- a/web/style.css
+++ b/web/style.css
@@ -83,14 +83,29 @@ header#connection-bar {
 
 /* --- User-confirm control (replaces a modal OK dialog) --- */
 
+/* Sits directly under the hold-time row of #header-countdown (the two
+   share this column so #header-countdown's own 'hidden' toggle doesn't
+   hide the confirm row along with it - a WAIT_USER confirm can happen
+   before the countdown ever becomes visible). max-width + wrapping keeps
+   a long message from overflowing off-screen on an iPad's tighter
+   viewport (~768-834 CSS px in portrait) instead of just widening the
+   whole header sideways. */
+#countdown-confirm-col {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em;
+}
 #user-confirm-row {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: 0.6em;
+    gap: 0.4em;
+    max-width: min(60vw, 20em);
 }
 #user-confirm-text {
     color: var(--yellow);
     font-weight: bold;
+    font-size: 0.9em;
 }
 #btn-user-confirm {
     font-weight: bold;