From ac1c9c677699219598c7fb62b664b16036c4ad11 Mon Sep 17 00:00:00 2001
From: ngoiyaeric <1.15367894e+08+ngoiyaeric@users.noreply.github.com>
Date: Fri, 10 Jul 2026 13:33:40 +0000
Subject: [PATCH] UI: fix example prompts overflow and mobile icons not
 reaching screen edge

1. Example prompts overflow on mobile:
   - Added overflow-hidden to container to prevent horizontal overflow
   - Added whitespace-normal, break-words, and max-w-[calc(100vw-2rem)] so long prompts break to a new line instead of extending past the screen
   - Used gap-1.5 between icon and text instead of mr-2 for consistent spacing
   - Icons use flex-shrink-0 to prevent squishing

2. Mobile icons not reaching end of screen:
   - Removed min-width: max-content which caused content to shrink and leave empty space on the right
   - Set width: 100% to ensure the icons bar fills the full screen width
   - Changed from space-between to space-evenly for consistent equal distribution
   - Removed the tablet override media query (768px) that was overriding with gap: 0 and space-between
   - Set consistent gap of 8px across all mobile/tablet sizes
---
 app/globals.css             | 16 +++-------------
 components/empty-screen.tsx |  6 +++---
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 722fc36d..7f2c280f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -144,26 +144,16 @@
 
   .mobile-icons-bar-content {
     display: flex;
-    gap: 10px;
+    gap: 8px;
     padding: 0 5px;
-    min-width: max-content;
-    /* justify-content: space-between; */
+    width: 100%;
+    justify-content: space-evenly;
   }
 
   .mobile-icons-bar-content > * {
     flex-shrink: 0;
   }
 
-  /* Tablet overrides (spaced-out) */
-  @media (min-width: 768px) {
-    .mobile-icons-bar-content {
-      min-width: 0;
-      width: 100%;
-      justify-content: space-between;
-      gap: 0; /* Remove gap if using space-between */
-    }
-  }
-
   /*
   .mobile-chat-section {
     flex: 1; 
diff --git a/components/empty-screen.tsx b/components/empty-screen.tsx
index 2c0f63e4..2df0688a 100644
--- a/components/empty-screen.tsx
+++ b/components/empty-screen.tsx
@@ -32,7 +32,7 @@ export function EmptyScreen({
   className?: string;
 }) {
   return (
-    <div className={`mx-auto w-full transition-all ${className}`}>
+    <div className={`mx-auto w-full transition-all overflow-hidden ${className}`}>
       <div className="bg-background p-2">
         <div className="mt-4 flex flex-col items-start space-y-2 mb-4">
           {exampleMessages.map((item) => {
@@ -41,13 +41,13 @@ export function EmptyScreen({
               <Button
                 key={item.message} // Use a unique property as the key.
                 variant="link"
-                className="h-auto p-0 text-base flex items-center"
+                className="h-auto p-0 text-base flex items-center gap-1.5 whitespace-normal text-left break-words max-w-[calc(100vw-2rem)] sm:max-w-full"
                 name={item.message}
                 onClick={async () => {
                   submitMessage(item.message);
                 }}
               >
-                <Icon size={16} className="mr-2 text-muted-foreground" />
+                <Icon size={16} className="text-muted-foreground flex-shrink-0" />
                 {item.heading}
               </Button>
             );