[render preview] Fix/UI text overflow

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from 'next'
 import { Inter as FontSans, Poppins } from 'next/font/google'
 import './globals.css'
 import 'katex/dist/katex.min.css';
+import 'glassmorphic/glassmorphic.css';
 import { cn } from '@/lib/utils'
 import { ThemeProvider } from '@/components/theme-provider'
 import Header from '@/components/header'

components/calendar-notepad.tsx

@@ -92,7 +92,7 @@ export function CalendarNotepad({ chatId }: CalendarNotepadProps) {
   };
 
   return (
-    <div data-testid="calendar-notepad" className="bg-card text-card-foreground shadow-lg rounded-lg p-4 max-w-2xl mx-auto my-4 border">
+    <div data-testid="calendar-notepad" className="bg-card text-card-foreground shadow-lg rounded-lg p-4 max-w-2xl mx-auto my-4 border overflow-hidden">
       <div className="flex items-center justify-between mb-4">
         <button
           onClick={() => setDateOffset(dateOffset - 7)}
@@ -151,10 +151,10 @@ export function CalendarNotepad({ chatId }: CalendarNotepadProps) {
       <div className="space-y-4">
         {notes.length > 0 ? (
           notes.map((note) => (
-            <div key={note.id} className="p-3 bg-muted rounded-md">
+            <div key={note.id} className="p-3 bg-muted rounded-md overflow-hidden">
               <div className="flex justify-between items-start">
                 <div>
-                  <p className="text-xs text-muted-foreground mb-1">
+                  <p className="text-xs truncate text-muted-foreground mb-1">
                     {new Date(note.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                   </p>
                   <p className="text-sm whitespace-pre-wrap break-words">{note.content}</p>

components/chat-panel.tsx

@@ -241,9 +241,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             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',
-              isMobile
-                ? 'mobile-chat-input input bg-background'
-                : 'bg-muted'
+              isMobile ? 'mobile-chat-input input bg-background' : 'bg-muted'
             )}
             onChange={e => {
               setInput(e.target.value)
@@ -292,10 +290,15 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
       {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">
+            <span className="text-sm text-muted-foreground truncate max-w-[60%]">
               {selectedFile.name}
             </span>
-            <Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={clearAttachment}
+              data-testid="clear-attachment-button"
+            >
               <X size={16} />
             </Button>
           </div>

components/empty-screen.tsx

@@ -34,21 +34,21 @@ export function EmptyScreen({
   return (
     <div className={`mx-auto w-full transition-all ${className}`}>
       <div className="bg-background p-2">
-        <div className="mt-4 flex flex-col items-start space-y-2 mb-4">
+        <div className="mt-4 flex flex-col items-start space-y-2 mb-4 w-full overflow-hidden">
           {exampleMessages.map((item) => {
             const Icon = item.icon;
             return (
               <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 w-full overflow-hidden 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 shrink-0 text-muted-foreground" />
+                <span className="truncate">{item.heading}</span>
               </Button>
             );
           })}

components/search-results-image.tsx

@@ -21,7 +21,6 @@ import {
 import { useEffect, useState } from 'react'
 import { PlusCircle } from 'lucide-react'
 import { motion } from 'framer-motion'
-import 'glassmorphic/glassmorphic.css'
 
 interface SearchResultsImageSectionProps {
   images: string[]
@@ -98,7 +97,9 @@ export const SearchResultsImageSection: React.FC<
           <DialogContent className="sm:max-w-3xl max-h-[80vh] overflow-auto glassmorphic">
             <DialogHeader>
               <DialogTitle>Search Images</DialogTitle>
-              <DialogDescription className="text-sm">{query}</DialogDescription>
+              <DialogDescription className="text-sm line-clamp-2">
+                {query}
+              </DialogDescription>
             </DialogHeader>
             <div className="py-4">
               <Carousel

components/video-search-results.tsx

@@ -118,7 +118,7 @@ export function VideoSearchResults({ results }: VideoSearchResultsProps) {
           <DialogContent className="sm:max-w-3xl max-h-[80vh] overflow-auto">
             <DialogHeader>
               <DialogTitle>Search Videos</DialogTitle>
-              <DialogDescription className="text-sm">
+              <DialogDescription className="text-sm line-clamp-2">
                 {results.searchParameters.q}
               </DialogDescription>
             </DialogHeader>

tests/responsive.spec.ts

@@ -222,6 +222,43 @@ test.describe('Responsive design - Small Mobile', () => {
       expect(messageBox.width).toBeLessThanOrEqual(320);
     }
   });
+
+  test('should not overflow with long attached file name', async ({ page }) => {
+    const attachmentButton = page.locator('[data-testid="mobile-attachment-button"]');
+    if (await attachmentButton.isVisible()) {
+      await page.locator('input[type="file"]').setInputFiles({
+        name: 'this-is-a-very-long-filename-that-should-not-overflow-the-container-on-small-screens.pdf',
+        mimeType: 'application/pdf',
+        buffer: Buffer.from('test')
+      });
+
+      const fileContainer = page.locator('[data-testid="clear-attachment-button"]').locator('..');
+      if (await fileContainer.isVisible()) {
+        const containerBox = await fileContainer.boundingBox();
+        expect(containerBox).toBeTruthy();
+        if (containerBox) {
+          expect(containerBox.width).toBeLessThanOrEqual(320);
+        }
+
+        const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
+        expect(bodyWidth).toBeLessThanOrEqual(321);
+      }
+    }
+  });
+
+  test('should not cause horizontal scroll with long query in search dialog', async ({ page }) => {
+    const dialogDesc = page.locator('[role="dialog"] p.line-clamp-2');
+    if (await dialogDesc.isVisible()) {
+      const descBox = await dialogDesc.boundingBox();
+      expect(descBox).toBeTruthy();
+      if (descBox) {
+        expect(descBox.width).toBeLessThanOrEqual(320);
+      }
+
+      const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
+      expect(bodyWidth).toBeLessThanOrEqual(321);
+    }
+  });
 });
 
 test.describe('Responsive design - Large Desktop', () => {