From 6431b41d9870fda1e14d84f66b0bb7a9b770986b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 1 Feb 2026 11:06:49 +0000
Subject: [PATCH] fix: reduce padding in mobile chat input area

- Reduced vertical padding in `.mobile-chat-input-area` in `globals.css`.
- Removed redundant `.mobile-chat-input` class and associated styles from `globals.css`.
- Adjusted `ChatPanel` to use more compact padding and a smaller minimum height on mobile.
- Removed excessive left padding (`pl-14`) on the mobile chat input since the attachment button is moved to the icons bar.
- Cleaned up unused mobile-specific CSS classes in `globals.css`.

Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
---
 app/globals.css           | 57 +--------------------------------------
 components/chat-panel.tsx | 11 ++++----
 2 files changed, 6 insertions(+), 62 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 22f95cba..5fd22aef 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -189,7 +189,7 @@
 
   .mobile-chat-input-area {
     height: auto;
-    padding: 10px;
+    padding: 4px 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 */
@@ -199,61 +199,6 @@
     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;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: hsl(var(--secondary));
-    color: hsl(var(--secondary-foreground));
-    cursor: pointer;
-  }
-
-  .mobile-icons-bar-content .icon-button:hover {
-    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 c45844d3..2a8c559e 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -199,13 +199,12 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
         onSubmit={handleSubmit}
         className={cn(
           'max-w-full w-full',
-          isMobile ? 'px-2 pb-2 pt-1 h-full flex flex-col justify-center' : ''
+          isMobile ? 'px-2 pb-1 pt-0 h-full flex flex-col justify-center' : ''
         )}
       >
         <div
           className={cn(
-            'relative flex items-start w-full',
-            isMobile && 'mobile-chat-input' // Apply mobile chat input styling
+            'relative flex items-start w-full'
           )}
         >
           <input type="hidden" name="mapProvider" value={mapProvider} />
@@ -241,10 +240,10 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             value={input}
             data-testid="chat-input"
             className={cn(
-              'resize-none w-full min-h-12 rounded-fill border border-input pl-14 pr-12 pt-3 pb-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              'resize-none w-full rounded-fill border border-input pr-12 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
               isMobile
-                ? 'mobile-chat-input input bg-background'
-                : 'bg-muted'
+                ? 'bg-background min-h-10 pl-4 pt-2 pb-1'
+                : 'bg-muted min-h-12 pl-14 pt-3 pb-1'
             )}
             onChange={e => {
               setInput(e.target.value)