From bb642f4f463ee04c500d87b70300a5d5c31d7e5c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 17 Jul 2026 07:06:44 -0500
Subject: [PATCH] fix overflowing model names in settings genai widget

---
 .../theme/widgets/GenAIModelWidget.tsx        | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/web/src/components/config-form/theme/widgets/GenAIModelWidget.tsx b/web/src/components/config-form/theme/widgets/GenAIModelWidget.tsx
index ca5b30d29f..58a30434b4 100644
--- a/web/src/components/config-form/theme/widgets/GenAIModelWidget.tsx
+++ b/web/src/components/config-form/theme/widgets/GenAIModelWidget.tsx
@@ -227,16 +227,18 @@ export function GenAIModelWidget(props: WidgetProps) {
               aria-expanded={open}
               disabled={disabled || readonly}
               className={cn(
-                "justify-between font-normal",
+                "min-w-0 justify-between font-normal",
                 !currentLabel && "text-muted-foreground",
                 fieldClassName,
               )}
             >
-              {currentLabel ??
-                t("configForm.genaiModel.placeholder", {
-                  ns: "views/settings",
-                  defaultValue: "Select or enter a model…",
-                })}
+              <span className="truncate">
+                {currentLabel ??
+                  t("configForm.genaiModel.placeholder", {
+                    ns: "views/settings",
+                    defaultValue: "Select or enter a model…",
+                  })}
+              </span>
               <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
             </Button>
           </PopoverTrigger>
@@ -263,12 +265,14 @@ export function GenAIModelWidget(props: WidgetProps) {
                       value={trimmedSearch}
                       onSelect={() => commit(trimmedSearch)}
                     >
-                      <Plus className="mr-2 h-4 w-4" />
-                      {t("configForm.genaiModel.useCustom", {
-                        ns: "views/settings",
-                        value: trimmedSearch,
-                        defaultValue: 'Use "{{value}}"',
-                      })}
+                      <Plus className="mr-2 h-4 w-4 shrink-0" />
+                      <span className="truncate">
+                        {t("configForm.genaiModel.useCustom", {
+                          ns: "views/settings",
+                          value: trimmedSearch,
+                          defaultValue: 'Use "{{value}}"',
+                        })}
+                      </span>
                     </CommandItem>
                   </CommandGroup>
                 )}
@@ -287,11 +291,11 @@ export function GenAIModelWidget(props: WidgetProps) {
                       >
                         <Check
                           className={cn(
-                            "mr-2 h-4 w-4",
+                            "mr-2 h-4 w-4 shrink-0",
                             value === model ? "opacity-100" : "opacity-0",
                           )}
                         />
-                        {model}
+                        <span className="truncate">{model}</span>
                       </CommandItem>
                     ))}
                   </CommandGroup>