From 2964782f4535d982681c1815caaeb64868073b93 Mon Sep 17 00:00:00 2001
From: Luis Llanes <luisllaboj@gmail.com>
Date: Tue, 13 May 2025 17:30:04 -0700
Subject: [PATCH] fix: select and text overflow when text gets long

---
 app/ai/components/ai-chat-form.tsx             | 2 +-
 app/ai/components/temp-theme-preset-select.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/ai/components/ai-chat-form.tsx b/app/ai/components/ai-chat-form.tsx
index e197aece..8471fdb5 100644
--- a/app/ai/components/ai-chat-form.tsx
+++ b/app/ai/components/ai-chat-form.tsx
@@ -83,7 +83,7 @@ export function AIChatForm() {
         </div>
 
         <div className="flex items-center justify-between gap-2 p-2">
-          <div className="flex items-center gap-2">
+          <div className="flex w-full max-w-68 items-center gap-2 overflow-hidden">
             <ThemePresetSelect disabled={aiGenerateLoading} withCycleThemes={false} />
           </div>
 
diff --git a/app/ai/components/temp-theme-preset-select.tsx b/app/ai/components/temp-theme-preset-select.tsx
index 65362f74..6e4af5e9 100644
--- a/app/ai/components/temp-theme-preset-select.tsx
+++ b/app/ai/components/temp-theme-preset-select.tsx
@@ -269,7 +269,7 @@ const ThemePresetSelect: React.FC<ThemePresetSelectProps> = ({
   }, [filteredPresets, isSavedTheme]);
 
   return (
-    <div className="flex items-center">
+    <div className="flex w-full items-center">
       <Popover>
         <PopoverTrigger asChild>
           <Button
@@ -277,7 +277,7 @@ const ThemePresetSelect: React.FC<ThemePresetSelectProps> = ({
             className={cn("group relative w-full justify-between md:min-w-56", className)}
             {...props}
           >
-            <div className="flex items-center gap-3">
+            <div className="flex w-full items-center gap-3 overflow-hidden">
               <div className="flex gap-0.5">
                 <ColorBox color={themeState.styles[mode].primary} />
                 <ColorBox color={themeState.styles[mode].accent} />
@@ -296,7 +296,7 @@ const ThemePresetSelect: React.FC<ThemePresetSelectProps> = ({
                     />
                   </div>
                 )}
-              <span className="font-medium capitalize">
+              <span className="truncate text-left font-medium capitalize">
                 {hasUnsavedChanges() ? (
                   <>Custom (Unsaved)</>
                 ) : (
@@ -350,7 +350,7 @@ const ThemePresetSelect: React.FC<ThemePresetSelectProps> = ({
                           >
                             <ThemeColors presetName={presetName} mode={mode} />
                             <div className="flex flex-1 items-center gap-2">
-                              <span className="text-sm font-medium capitalize">
+                              <span className="line-clamp-1 text-sm font-medium capitalize">
                                 {presets[presetName]?.label || presetName}
                               </span>
                               {presets[presetName] && isThemeNew(presets[presetName]) && (