fix(layout): keep header controls inside narrow viewports

src/components/AppShell.tsx

@@ -114,6 +114,7 @@ function RegionSelector() {
 
   return (
     <Dropdown
+      align="left"
       width="w-60"
       renderTrigger={({ toggle }) => (
         <button
@@ -356,11 +357,13 @@ interface AppShellProps {
 export function AppShell({ activeTab, onTabChange, wsManager, children }: AppShellProps) {
   return (
     <div className="flex flex-col h-dvh">
-      <header className="flex items-center justify-between gap-2 px-3 md:px-4 h-[42px] bg-bg-surface border-b border-border shrink-0">
-        <BeaconWordmark iconSize={22} textClassName="text-sm" />
-        <div className="flex items-center gap-1.5 md:gap-3 min-w-0">
+      <header className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-3 py-1.5 min-h-[42px] md:flex md:gap-3 md:px-4 bg-bg-surface border-b border-border shrink-0">
+        <BeaconWordmark iconSize={22} textClassName="text-sm truncate" className="min-w-0" />
+        <div className="col-span-2 row-start-2 flex items-center justify-between gap-1.5 min-w-0 md:ml-auto md:justify-start md:gap-3">
           <RegionSelector />
           <ThemePicker />
+        </div>
+        <div className="col-start-2 row-start-1 flex items-center gap-1.5 md:gap-3">
           <LiveBadge wsManager={wsManager} />
           <RateLimitBadge />
           <a

tests/browser/header-layout.js

@@ -0,0 +1,30 @@
+// Paste into a real browser console at 320, 390, 768 and 1280 CSS pixels,
+// with both header pickers closed/open and a long region selection.
+// jsdom does not perform layout, so this check intentionally uses browser geometry.
+(function checkHeaderLayout() {
+  const header = document.querySelector("header");
+  if (!header) throw new Error("Header is missing");
+  const viewport = document.documentElement.clientWidth;
+  const bounds = header.getBoundingClientRect();
+  const controls = header.querySelectorAll("button, a, span, div");
+  const panels = new Set();
+  const failures = [];
+  for (const element of controls) {
+    if (!element.getClientRects().length) continue;
+    let floating = null;
+    for (let parent = element; parent && parent !== header; parent = parent.parentElement) {
+      if (["absolute", "fixed"].includes(getComputedStyle(parent).position)) floating = parent;
+    }
+    if (floating) { panels.add(floating); continue; }
+    const rect = element.getBoundingClientRect();
+    if (rect.left < -0.5 || rect.right > viewport + 0.5 || rect.top < bounds.top - 0.5 || rect.bottom > bounds.bottom + 0.5) {
+      failures.push(element.getAttribute("aria-label") || element.textContent.trim());
+    }
+  }
+  for (const panel of panels) {
+    const rect = panel.getBoundingClientRect();
+    if (rect.left < -0.5 || rect.right > viewport + 0.5) failures.push("Open picker outside viewport");
+  }
+  if (failures.length) throw new Error(`Header overflows at ${viewport}px: ${failures.join(", ")}`);
+  return { viewport, headerHeight: bounds.height, openPickers: panels.size, fits: true };
+})();