From 2e48da06df5f618853af4e1e4d419a6ad051df96 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 20 Sep 2025 16:41:21 +0000
Subject: [PATCH] fix(mobile): Move chat input into horizontally scrolling
 container

The chat input was previously located outside the horizontally scrolling icon bar on mobile devices, making it unreachable when the user scrolled.

This change refactors the mobile layout by moving the ChatPanel component to be a child of the MobileIconsBar component. This places the chat input inside the same scrollable container as the other icons, making it accessible.

- Modified `components/chat.tsx` to update the component hierarchy for the mobile layout.
- Updated `components/mobile-icons-bar.tsx` to accept and render child components.
- Adjusted styling in `components/chat-panel.tsx` to ensure it fits correctly within the icon bar.
- Removed unused CSS rules from `app/globals.css` that were related to the old layout.
---
 app/globals.css                 | 51 ---------------------------------
 components/chat-panel.tsx       |  4 +--
 components/chat.tsx             |  7 ++---
 components/mobile-icons-bar.tsx |  5 +++-
 4 files changed, 9 insertions(+), 58 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 4005365b..ed77a1b3 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -160,40 +160,6 @@
     box-sizing: border-box;
   }
 
-  .mobile-chat-input-area {
-    height: 70px;
-    padding: 10px;
-    background-color: hsl(var(--background));
-    /* border-top: 1px solid hsl(var(--border)); */ /* Removed for cleaner separation */
-    border-bottom: 1px solid hsl(var(--border)); /* Added for separation from messages area below */
-    box-sizing: border-box;
-    /* z-index: 30; */ /* No longer needed as it's in flow */
-    display: flex;
-    align-items: center;
-  }
-
-  .mobile-chat-input {
-    /* position: relative; */ /* No longer fixed to bottom */
-    /* bottom: 0; */
-    /* left: 0; */ /* Handled by parent flex */
-    /* right: 0; */ /* Handled by parent flex */
-    width: 100%; /* Ensure it takes full width of its container */
-    padding: 10px;
-    background-color: hsl(var(--background));
-    /* border-top: 1px solid hsl(var(--border)); */ /* Removed to avoid double border */
-    /* z-index: 30; */ /* No longer needed */
-  }
-
-  .mobile-chat-input input {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid hsl(var(--input));
-    border-radius: var(--radius);
-    background-color: hsl(var(--input));
-    color: hsl(var(--foreground));
-    box-sizing: border-box;
-  }
-
   .mobile-icons-bar-content .icon-button {
     display: flex;
     align-items: center;
@@ -210,23 +176,6 @@
     background-color: hsl(var(--secondary-foreground));
     color: hsl(var(--secondary));
   }
-
-  .mobile-chat-input .icon-button {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-  }
-
-  .mobile-chat-input .icon-button.paperclip {
-    right: 40px;
-  }
-
-  .mobile-chat-input .icon-button.arrow-right {
-    right: 10px;
-  }
 }
 
 /* Added for MapboxDraw controls */
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index c5268ead..b665dfaa 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -88,14 +88,14 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) {
       className={cn(
         'flex flex-col items-start',
         isMobile
-          ? 'w-full h-full'
+          ? 'w-auto'
           : 'sticky bottom-0 bg-background z-10 w-full border-t border-border px-2 py-3 md:px-4'
       )}
     >
       <form
         ref={formRef}
         onSubmit={handleSubmit}
-        className={cn('max-w-full w-full', isMobile ? 'px-2 pb-2 pt-1 h-full flex flex-col justify-center' : '')}
+        className={cn('max-w-full w-full', isMobile ? 'px-2 pb-2 pt-1 flex flex-col justify-center' : '')}
       >
         <div
           className={cn(
diff --git a/components/chat.tsx b/components/chat.tsx
index 34e92244..e86bf1f6 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -80,10 +80,9 @@ export function Chat({ id }: ChatProps) {
             {activeView ? <SettingsView /> : <Mapbox />}
           </div>
           <div className="mobile-icons-bar">
-            <MobileIconsBar />
-          </div>
-          <div className="mobile-chat-input-area">
-            <ChatPanel messages={messages} input={input} setInput={setInput} />
+            <MobileIconsBar>
+              <ChatPanel messages={messages} input={input} setInput={setInput} />
+            </MobileIconsBar>
           </div>
           <div className="mobile-chat-messages-area">
             {showEmptyScreen ? (
diff --git a/components/mobile-icons-bar.tsx b/components/mobile-icons-bar.tsx
index a5a2af9a..f2630837 100644
--- a/components/mobile-icons-bar.tsx
+++ b/components/mobile-icons-bar.tsx
@@ -18,7 +18,9 @@ import { History } from '@/components/history'
 import { MapToggle } from './map-toggle'
 import { ModeToggle } from './mode-toggle'
 
-export const MobileIconsBar: React.FC = () => {
+export const MobileIconsBar: React.FC<{ children?: React.ReactNode }> = ({
+  children
+}) => {
   const [, setMessages] = useUIState<typeof AI>()
   const { clearChat } = useActions()
 
@@ -53,6 +55,7 @@ export const MobileIconsBar: React.FC = () => {
       </Button>
       <History location="header" />
       <ModeToggle />
+      {children}
     </div>
   )
 }