From a9bfb430f75f5e67dfb11de1bc91054335c1562c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 1 Jul 2026 01:48:00 +0000
Subject: [PATCH 1/2] fix(configurator): stop mobile domain panel overflowing
 past the icon rail

The domain panel sat in the same flex row as the icon nav rail but used
w-full (100% of the whole row, not the space remaining after the rail)
combined with shrink-0 (refusing to shrink to fit). With the rail's
~56px plus the panel's full row width, the row demanded more space
than the viewport had, silently clipping content on the right with no
scrollbar since the app root uses overflow-hidden.

Switch to flex-1 min-w-0 on mobile so the panel fills whatever space
is actually left after the rail and can shrink to fit; md:flex-none
keeps the desktop behavior (fixed 360px, no growing/shrinking)
unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SQXr34nocCi1jrGcp5TPVm
---
 configurator/src/App.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index 12738160..c8a2fde5 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -268,8 +268,10 @@
       />
     </div>
 
-    <!-- Left domain panel — full width on mobile, fixed 360px on desktop -->
-    <div class={`w-full md:w-[360px] shrink-0 bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
+    <!-- Left domain panel — fills remaining row width on mobile (the icon
+         rail above already claims its own space, so w-full here would mean
+         100% of the whole row and overflow past it), fixed 360px on desktop -->
+    <div class={`flex-1 min-w-0 md:flex-none md:w-[360px] bg-[#0c0c15] border-r border-white/8 flex-col min-h-0 ${mobileView === "preview" ? "hidden md:flex" : "flex"}`}>
       <!-- Panel heading -->
       <div class="h-9 flex items-center px-4 border-b border-white/6 shrink-0">
         <span data-testid="panel-heading" class="text-[11px] font-bold text-slate-300 uppercase tracking-widest flex-1">

From 1de5f5a9858fc1c1a314eede43b360ea015e505b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 1 Jul 2026 01:52:24 +0000
Subject: [PATCH 2/2] fix(configurator): move mobile Controls/Preview switcher
 to the top
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It sat at the very bottom of the screen, below the domain panel and
above the status bar — awkward to reach and easy to miss. Move it
directly under the header instead, so it's immediately visible and
reachable without scrolling to the bottom on tall phones. Same
buttons/state/handlers, just relocated.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SQXr34nocCi1jrGcp5TPVm
---
 configurator/src/App.svelte | 52 +++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte
index c8a2fde5..02d0eb31 100644
--- a/configurator/src/App.svelte
+++ b/configurator/src/App.svelte
@@ -257,6 +257,33 @@
     onSave={handleSave}
   />
 
+  <!-- Mobile fold toggle: switch between the controls panel and the live
+       preview. Lives right under the header (not at the bottom) so it's
+       visible without scrolling and doesn't compete with the status bar. -->
+  <div class="md:hidden flex items-stretch border-b border-white/8 bg-[#0d0d14] shrink-0">
+    <button
+      onclick={() => { mobileView = "controls"; }}
+      aria-pressed={mobileView === "controls"}
+      class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
+        mobileView === "controls" ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
+      }`}
+    >
+      <SlidersHorizontal class="w-3.5 h-3.5" /> Controls
+    </button>
+    <button
+      onclick={() => { mobileView = "preview"; }}
+      aria-pressed={mobileView === "preview"}
+      class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
+        mobileView === "preview" ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
+      }`}
+    >
+      <Eye class="w-3.5 h-3.5" /> Preview
+      {#if overridesCount > 0}
+        <span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[8px] font-black">{overridesCount > 9 ? "9+" : overridesCount}</span>
+      {/if}
+    </button>
+  </div>
+
   <!-- Main body: sidebar + left panel + preview -->
   <div class="flex flex-1 min-h-0">
     <!-- Icon nav rail — hidden on mobile while the preview is folded open -->
@@ -310,31 +337,6 @@
     </div>
   </div>
 
-  <!-- Mobile fold toggle: switch between the controls panel and the live preview -->
-  <div class="md:hidden flex items-stretch border-t border-white/8 bg-[#0d0d14] shrink-0">
-    <button
-      onclick={() => { mobileView = "controls"; }}
-      aria-pressed={mobileView === "controls"}
-      class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
-        mobileView === "controls" ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
-      }`}
-    >
-      <SlidersHorizontal class="w-3.5 h-3.5" /> Controls
-    </button>
-    <button
-      onclick={() => { mobileView = "preview"; }}
-      aria-pressed={mobileView === "preview"}
-      class={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold transition-colors cursor-pointer ${
-        mobileView === "preview" ? "text-indigo-300 bg-indigo-500/10" : "text-slate-500 hover:text-slate-300"
-      }`}
-    >
-      <Eye class="w-3.5 h-3.5" /> Preview
-      {#if overridesCount > 0}
-        <span class="w-4 h-4 bg-indigo-600 text-white rounded-full flex items-center justify-center text-[8px] font-black">{overridesCount > 9 ? "9+" : overridesCount}</span>
-      {/if}
-    </button>
-  </div>
-
   <!-- Status bar -->
   <StatusBar
     {overridesCount}