From 6554775a4ed1766ffe0b7ccb38ab38e287103219 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 18:22:34 +0000
Subject: [PATCH] fix: ensure long sentences wrap to the next line across UI
 components

- Updated `EmptyScreen` example buttons to use `whitespace-normal`, `text-left`, and `items-start` for better multi-line support.
- Added `break-words` to `BotMessage` container to prevent horizontal overflow from long strings.
- Improved `SuggestionsDropdown` and `SearchRelated` buttons with wrapping and top-alignment.
- Replaced filename truncation with `break-all` wrapping in `ChatPanel` file attachments.
- Ensured consistent icon alignment for multi-line buttons.

Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
---
 components/chat-panel.tsx           | 6 +++---
 components/empty-screen.tsx         | 6 +++---
 components/message.tsx              | 2 +-
 components/search-related.tsx       | 2 +-
 components/suggestions-dropdown.tsx | 6 +++---
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index 2a8c559e..fa0e5c56 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -292,11 +292,11 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
       </form>
       {selectedFile && (
         <div className="w-full px-4 pb-2 mb-2">
-          <div className="flex items-center justify-between p-2 bg-muted rounded-lg">
-            <span className="text-sm text-muted-foreground truncate max-w-xs">
+          <div className="flex items-start justify-between p-2 bg-muted rounded-lg">
+            <span className="text-sm text-muted-foreground break-all mr-2">
               {selectedFile.name}
             </span>
-            <Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button">
+            <Button variant="ghost" size="icon" className="shrink-0" onClick={clearAttachment} data-testid="clear-attachment-button">
               <X size={16} />
             </Button>
           </div>
diff --git a/components/empty-screen.tsx b/components/empty-screen.tsx
index 2c0f63e4..ad36d7d3 100644
--- a/components/empty-screen.tsx
+++ b/components/empty-screen.tsx
@@ -41,14 +41,14 @@ 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-start whitespace-normal text-left"
                 name={item.message}
                 onClick={async () => {
                   submitMessage(item.message);
                 }}
               >
-                <Icon size={16} className="mr-2 text-muted-foreground" />
-                {item.heading}
+                <Icon size={16} className="mr-2 mt-1 text-muted-foreground shrink-0" />
+                <span className="flex-1">{item.heading}</span>
               </Button>
             );
           })}
diff --git a/components/message.tsx b/components/message.tsx
index 264aa1f6..07534046 100644
--- a/components/message.tsx
+++ b/components/message.tsx
@@ -18,7 +18,7 @@ export function BotMessage({ content }: { content: StreamableValue<string> }) {
   const processedData = preprocessLaTeX(data || '')
 
   return (
-    <div className="overflow-x-auto">
+    <div className="overflow-x-auto break-words">
       <MemoizedReactMarkdown
         rehypePlugins={[[rehypeExternalLinks, { target: '_blank' }], rehypeKatex]}
         remarkPlugins={[remarkGfm, remarkMath]}
diff --git a/components/search-related.tsx b/components/search-related.tsx
index d4a58b08..316a66e6 100644
--- a/components/search-related.tsx
+++ b/components/search-related.tsx
@@ -64,7 +64,7 @@ export const SearchRelated: React.FC<SearchRelatedProps> = ({
             <ArrowRight className="h-4 w-4 mr-2 mt-1 flex-shrink-0 text-accent-foreground/50" />
             <Button
               variant="link"
-              className="flex-1 justify-start px-0 py-1 h-fit font-semibold text-accent-foreground/50 whitespace-normal text-left"
+              className="flex-1 justify-start items-start px-0 py-1 h-auto font-semibold text-accent-foreground/50 whitespace-normal text-left"
               type="submit"
               name={'related_query'}
               value={item?.query}
diff --git a/components/suggestions-dropdown.tsx b/components/suggestions-dropdown.tsx
index 33be6e48..fda0e1bd 100644
--- a/components/suggestions-dropdown.tsx
+++ b/components/suggestions-dropdown.tsx
@@ -99,14 +99,14 @@ export const SuggestionsDropdown: React.FC<SuggestionsDropdownProps> = ({
               key={index}
               variant="ghost"
               className={cn(
-                'w-full justify-start px-2 py-1 h-fit font-normal text-accent-foreground whitespace-normal text-left',
+                'w-full justify-start items-start px-2 py-1 h-auto font-normal text-accent-foreground whitespace-normal text-left',
                 selectedIndex === index && 'bg-accent'
               )}
               onClick={() => onSelect(item.query!)}
               onMouseEnter={() => setSelectedIndex(index)}
             >
-              <ArrowRight className="h-4 w-4 mr-2 flex-shrink-0" />
-              {item.query}
+              <ArrowRight className="h-4 w-4 mr-2 mt-1 flex-shrink-0" />
+              <span className="flex-1">{item.query}</span>
             </Button>
           )
         })}