From 8155fc9956a297613bfabd5e2aa5b00e371c764b Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sun, 14 Dec 2025 12:40:00 +0000
Subject: [PATCH] Ensure welcome and palette layouts wrap on phone

---
 packages/ui/src/components/folder-selection-view.tsx    | 4 ++--
 packages/ui/src/components/instance-welcome-view.tsx    | 4 ++--
 packages/ui/src/components/instance/instance-shell2.tsx | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/folder-selection-view.tsx b/packages/ui/src/components/folder-selection-view.tsx
index 51e469c3..c495457a 100644
--- a/packages/ui/src/components/folder-selection-view.tsx
+++ b/packages/ui/src/components/folder-selection-view.tsx
@@ -224,11 +224,11 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
   return (
     <>
       <div
-        class="flex h-screen w-full items-start justify-center overflow-hidden py-6 relative"
+        class="flex h-screen w-full items-start justify-center overflow-hidden py-6 px-4 sm:px-6 relative"
         style="background-color: var(--surface-secondary)"
       >
         <div
-          class="w-full max-w-3xl h-full px-8 pb-2 flex flex-col overflow-hidden"
+          class="w-full max-w-3xl h-full px-4 sm:px-8 pb-2 flex flex-col overflow-hidden"
           aria-busy={isLoading() ? "true" : "false"}
         >
           <Show when={props.onOpenRemoteAccess}>
diff --git a/packages/ui/src/components/instance-welcome-view.tsx b/packages/ui/src/components/instance-welcome-view.tsx
index e8a15548..930d7a6e 100644
--- a/packages/ui/src/components/instance-welcome-view.tsx
+++ b/packages/ui/src/components/instance-welcome-view.tsx
@@ -314,8 +314,8 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
 
   return (
     <div class="flex-1 flex flex-col overflow-hidden bg-surface-secondary">
-      <div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-auto">
-        <div class="flex-1 flex flex-col gap-4 min-h-0">
+      <div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-auto min-w-0">
+        <div class="flex-1 flex flex-col gap-4 min-h-0 min-w-0">
           <Show
             when={parentSessions().length > 0}
             fallback={
diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index e090e551..af2ca137 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -702,7 +702,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             when={!isPhoneLayout()}
             fallback={
               <div class="flex flex-col w-full gap-1.5">
-                <div class="flex items-center justify-between gap-2">
+                <div class="flex flex-wrap items-center justify-between gap-2 w-full">
                   <IconButton
                     ref={setLeftToggleButtonEl}
                     color="inherit"
@@ -715,7 +715,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     {leftAppBarButtonIcon()}
                   </IconButton>
 
-                  <div class="flex items-center gap-2 justify-center">
+                  <div class="flex flex-wrap items-center gap-1 justify-center">
                     <button
                       type="button"
                       class="connection-status-button px-2 py-0.5 text-xs"
@@ -749,7 +749,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                   </IconButton>
                 </div>
 
-                <div class="flex items-center justify-center gap-2 pb-1">
+                <div class="flex flex-wrap items-center justify-center gap-2 pb-1">
                   <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
                     <span class="uppercase text-[10px] tracking-wide text-primary/70">Used</span>
                     <span class="font-semibold text-primary">{formattedUsedTokens()}</span>