From 66b3be8d77cfca47e71733b35822b9a2e9d0b28e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 28 Sep 2025 17:28:35 +0000
Subject: [PATCH] Fix(mobile): Correct mobile chat component order to enable
 scrolling

The mobile chat view had a scrolling issue because the component order in `components/chat.tsx` did not allow the chat message area to expand correctly. The flexbox layout requires the scrollable element with `flex: 1` to be ordered before the fixed-height elements to calculate its height properly.

This commit reorders the components to place the chat message area first, which resolves the scrolling problem. A comment has also been added to the code to explain the importance of this order for any future modifications.
---
 components/chat.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/components/chat.tsx b/components/chat.tsx
index 34e92244..817807a4 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -75,16 +75,12 @@ export function Chat({ id }: ChatProps) {
   if (isMobile) {
     return (
       <MapDataProvider> {/* Add Provider */}
+        {/* The order of components here is critical for mobile layout.
+            Using a flex column, the .mobile-chat-messages-area is set to flex: 1
+            which allows it to take up the remaining space. The other components
+            have fixed heights, so for the chat area to scroll properly, it must
+            be rendered before the fixed-height elements. */}
         <div className="mobile-layout-container">
-          <div className="mobile-map-section">
-            {activeView ? <SettingsView /> : <Mapbox />}
-          </div>
-          <div className="mobile-icons-bar">
-            <MobileIconsBar />
-          </div>
-          <div className="mobile-chat-input-area">
-            <ChatPanel messages={messages} input={input} setInput={setInput} />
-          </div>
           <div className="mobile-chat-messages-area">
             {showEmptyScreen ? (
               <EmptyScreen
@@ -96,6 +92,15 @@ export function Chat({ id }: ChatProps) {
               <ChatMessages messages={messages} />
             )}
           </div>
+          <div className="mobile-chat-input-area">
+            <ChatPanel messages={messages} input={input} setInput={setInput} />
+          </div>
+          <div className="mobile-icons-bar">
+            <MobileIconsBar />
+          </div>
+          <div className="mobile-map-section">
+            {activeView ? <SettingsView /> : <Mapbox />}
+          </div>
         </div>
       </MapDataProvider>
     );