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>
     );