Let the console header wrap, so the device stops sliding off-centre

Reported as bad scaling in the inspector: the overlay boxes did not sit
on the elements they described. The mapping was right — a node computed
to 7.96% left and 84.08% wide, exactly what its frame implies — and the
overlay tracked the canvas precisely. Both had simply been moved.

The header is 1014px of controls. In a window narrower than that it
overflowed, and clicking Inspect, which sits near its right end,
scrolled the page sideways to bring the button into view: scrollX went
from 0 to 152 and the stage went with it, carrying the device and its
overlay off-centre. Nothing was mis-scaled; the whole layout had been
dragged.

The header now wraps and the app-id input can shrink, so at 806px the
header measures 806 and scrollX stays 0 through the click. Verified at
that width: the device sits fully inside the stage and a node box lands
at 8.0% left, 84.1% wide within the canvas, matching its frame.

Author: omnarayan

internal/web/static/style.css

@@ -28,6 +28,12 @@ header {
   padding: 8px 12px;
   background: var(--panel);
   border-bottom: 1px solid var(--edge);
+  /* Wrap rather than overflow. A header wider than the window is not
+     merely clipped: focusing a control near its right edge scrolls the
+     whole page sideways, and the device and its inspector overlay slide
+     off-centre together — which reads as broken scaling rather than as
+     a layout that did not fit. */
+  flex-wrap: wrap;
 }
 
 .brand { font-weight: 700; letter-spacing: 0.02em; margin-right: 8px; }
@@ -42,7 +48,8 @@ select, input, button {
   font: inherit;
 }
 
-input#app { width: 230px; }
+/* Roomy when there is space, shrinkable when there is not. */
+input#app { width: 230px; flex: 0 1 230px; min-width: 110px; }
 button { cursor: pointer; }
 button:hover { border-color: var(--accent); }
 button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

internal/web/web_test.go

@@ -56,3 +56,20 @@ func TestConsoleWiresSharedModules(t *testing.T) {
 		}
 	}
 }
+
+// The console header must be able to wrap. Wider than the window, it is
+// not merely clipped: focusing a control near its right edge scrolls the
+// page sideways, and the device and its inspector overlay slide
+// off-centre together, which reads as broken scaling rather than as a
+// header that did not fit.
+func TestConsoleHeaderWraps(t *testing.T) {
+	css := get(t, "/style.css").Body.String()
+	header := css[strings.Index(css, "header {"):]
+	header = header[:strings.Index(header, "}")]
+	if !strings.Contains(header, "flex-wrap: wrap") {
+		t.Errorf("header must wrap rather than overflow:\n%s", header)
+	}
+	if !strings.Contains(css, "input#app") || !strings.Contains(css, "min-width: 110px") {
+		t.Error("the app-id input must be allowed to shrink")
+	}
+}