From 9b20d50659c56f5777971d42791a54ef8e9d73f2 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 10 Jan 2026 21:20:26 +0000
Subject: [PATCH] fix(ui): resolve text overflow issues

This commit addresses several UI text overflow issues across the application.

- Standardized the mobile breakpoint to 1024px in `components/chat.tsx` to match the CSS media queries.
- Removed `whitespace-nowrap` from the base `Button` component in `components/ui/button.tsx` to allow button text to wrap by default.
- Refactored the settings tabs in `components/settings/components/settings.tsx` to use the `Button` component, fixing the overflow on smaller screens.
- Removed `whitespace-nowrap` from the label in `components/copilot.tsx` to allow long checkbox labels to wrap.
---
 components/chat.tsx                         |  2 +-
 components/copilot.tsx                      |  2 +-
 components/settings/components/settings.tsx | 16 ++++++++++++----
 components/ui/button.tsx                    |  2 +-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/chat.tsx b/components/chat.tsx
index e4dc13a8..07967701 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -44,7 +44,7 @@ export function Chat({ id }: ChatProps) {
   useEffect(() => {
     // Check if device is mobile
     const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768)
+      setIsMobile(window.innerWidth < 1024)
     }
     
     // Initial check
diff --git a/components/copilot.tsx b/components/copilot.tsx
index b62b37ed..53fc4b9b 100644
--- a/components/copilot.tsx
+++ b/components/copilot.tsx
@@ -146,7 +146,7 @@ export const Copilot: React.FC<CopilotProps> = ({ inquiry }: CopilotProps) => {
                   }
                 />
                 <label
-                  className="text-sm whitespace-nowrap pr-4"
+                  className="text-sm pr-4"
                   htmlFor={option?.value}
                 >
                   {option?.label}
diff --git a/components/settings/components/settings.tsx b/components/settings/components/settings.tsx
index 0d201916..11b3e6ac 100644
--- a/components/settings/components/settings.tsx
+++ b/components/settings/components/settings.tsx
@@ -153,10 +153,18 @@ export function Settings({ initialTab = "system-prompt" }: SettingsProps) {
         <div className="space-y-6">
           <Tabs.Root value={currentTab} onValueChange={setCurrentTab} className="w-full">
             <Tabs.List className="grid w-full grid-cols-4 gap-x-2">
-              <Tabs.Trigger value="system-prompt" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">System Prompt</Tabs.Trigger>
-              <Tabs.Trigger value="model" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">Model Selection</Tabs.Trigger>
-              <Tabs.Trigger value="user-management" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">User Management</Tabs.Trigger>
-              <Tabs.Trigger value="map" className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 data-[state=active]:bg-primary/80">Map</Tabs.Trigger>
+              <Tabs.Trigger value="system-prompt" asChild>
+                <Button variant="outline" className="data-[state=active]:bg-primary/80">System Prompt</Button>
+              </Tabs.Trigger>
+              <Tabs.Trigger value="model" asChild>
+                <Button variant="outline" className="data-[state=active]:bg-primary/80">Model Selection</Button>
+              </Tabs.Trigger>
+              <Tabs.Trigger value="user-management" asChild>
+                <Button variant="outline" className="data-[state=active]:bg-primary/80">User Management</Button>
+              </Tabs.Trigger>
+              <Tabs.Trigger value="map" asChild>
+                <Button variant="outline" className="data-[state=active]:bg-primary/80">Map</Button>
+              </Tabs.Trigger>
             </Tabs.List>
             <AnimatePresence mode="wait">
               <motion.div
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 22d68deb..1334aba7 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {