From ab5e29cdb8da51f0fd494962e80a104889dee275 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 1 Jul 2026 07:09:23 +0000
Subject: [PATCH 1/2] fix(configurator): keep preview toolbar to a single row
 on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The toolbar used flex-wrap below md, so on narrow viewports its
template tabs, width/theme controls, motion select, and refresh/
external-link buttons wrapped onto 2-3 lines — eating a large chunk of
a short mobile screen before any preview content was visible.

Switch to a fixed-height single row that scrolls horizontally instead
of wrapping (h-10, flex-nowrap, overflow-x-auto), with shrink-0 on
every control group so none of them get squeezed to near-invisibility
competing for space in the nowrap row.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SQXr34nocCi1jrGcp5TPVm
---
 .../src/components/shell/PreviewPanel.svelte    | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/configurator/src/components/shell/PreviewPanel.svelte b/configurator/src/components/shell/PreviewPanel.svelte
index 378c0bb1..a519c983 100644
--- a/configurator/src/components/shell/PreviewPanel.svelte
+++ b/configurator/src/components/shell/PreviewPanel.svelte
@@ -558,10 +558,11 @@ ${BODIES[template]}
 </script>
 
 <div class="flex flex-col flex-1 min-h-0 bg-[#09090e]">
-  <!-- Preview toolbar -->
-  <div class="min-h-10 bg-[#0d0d14] border-b border-white/8 flex flex-wrap md:flex-nowrap items-center px-3 gap-2 py-1.5 md:py-0 shrink-0">
+  <!-- Preview toolbar — always a single row (scrolls horizontally instead of
+       wrapping) so it can't eat a growing chunk of a short mobile viewport. -->
+  <div class="h-10 bg-[#0d0d14] border-b border-white/8 flex flex-nowrap items-center px-3 gap-2 overflow-x-auto shrink-0">
     <!-- Template tabs -->
-    <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto">
+    <div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto">
       {#each TEMPLATES as t (t.id)}
         <button
           onclick={() => onTemplateChange(t.id)}
@@ -577,7 +578,7 @@ ${BODIES[template]}
     <div class="w-px h-4 bg-white/10 mx-1"></div>
 
     <!-- Width controls -->
-    <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5">
+    <div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5">
       {#each (["fluid", "desktop", "tablet", "mobile"] as const) as w (w)}
         <button
           onclick={() => onWidthChange(w)}
@@ -596,7 +597,7 @@ ${BODIES[template]}
     </div>
 
     <!-- Light/dark/split -->
-    <div class="flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5">
+    <div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5">
       <button
         onclick={() => { splitMode = false; onThemeChange("light"); }}
         title="Light mode"
@@ -626,7 +627,7 @@ ${BODIES[template]}
     <select
       value={previewMotion}
       onchange={(e) => onMotionChange((e.target as HTMLSelectElement).value as "normal" | "slow" | "none")}
-      class="bg-white/5 border border-white/8 text-slate-400 rounded-lg px-2 py-0.5 text-[10px] font-bold focus:outline-none cursor-pointer"
+      class="shrink-0 bg-white/5 border border-white/8 text-slate-400 rounded-lg px-2 py-0.5 text-[10px] font-bold focus:outline-none cursor-pointer"
     >
       <option value="normal">Normal motion</option>
       <option value="slow">Slow motion</option>
@@ -637,7 +638,7 @@ ${BODIES[template]}
     <button
       onclick={() => { loadCount = 0; splitLightLoadCount = 0; splitDarkLoadCount = 0; refresh += 1; }}
       title="Reload preview"
-      class="p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"
+      class="shrink-0 p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"
     >
       <RefreshCw class="w-3 h-3" />
     </button>
@@ -650,7 +651,7 @@ ${BODIES[template]}
         window.open(url, "_blank");
       }}
       title="Open in new tab"
-      class="p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"
+      class="shrink-0 p-1 rounded-md text-slate-500 hover:text-slate-300 hover:bg-white/8 transition-all cursor-pointer"
     >
       <ExternalLink class="w-3 h-3" />
     </button>

From 5542e3c9a35c06aa0a9eed6828f4af206550d4cf Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 1 Jul 2026 07:17:51 +0000
Subject: [PATCH 2/2] fix(configurator): let the preview toolbar grow instead
 of clipping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A hard h-10 could clip a control that renders taller than 40px (OS
text-size scaling, browser zoom, platform-native <select> styling) —
only horizontal overflow was handled, so anything taller than the
fixed height would be cut off. min-h-10 keeps the same 40px height in
the normal case (verified) but lets the row grow if a child genuinely
needs more, while flex-nowrap + overflow-x-auto still keep it a single
non-wrapping row.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SQXr34nocCi1jrGcp5TPVm
---
 configurator/src/components/shell/PreviewPanel.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/configurator/src/components/shell/PreviewPanel.svelte b/configurator/src/components/shell/PreviewPanel.svelte
index a519c983..0539f5aa 100644
--- a/configurator/src/components/shell/PreviewPanel.svelte
+++ b/configurator/src/components/shell/PreviewPanel.svelte
@@ -560,7 +560,7 @@ ${BODIES[template]}
 <div class="flex flex-col flex-1 min-h-0 bg-[#09090e]">
   <!-- Preview toolbar — always a single row (scrolls horizontally instead of
        wrapping) so it can't eat a growing chunk of a short mobile viewport. -->
-  <div class="h-10 bg-[#0d0d14] border-b border-white/8 flex flex-nowrap items-center px-3 gap-2 overflow-x-auto shrink-0">
+  <div class="min-h-10 bg-[#0d0d14] border-b border-white/8 flex flex-nowrap items-center px-3 gap-2 overflow-x-auto shrink-0">
     <!-- Template tabs -->
     <div class="shrink-0 flex bg-white/5 border border-white/8 rounded-lg p-0.5 gap-0.5 max-w-full overflow-x-auto">
       {#each TEMPLATES as t (t.id)}