From 1c82abb707ed74def94489fdf935dbc6e49c9322 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@theo.li>
Date: Fri, 6 Nov 2026 02:16:27 -0800
Subject: [PATCH 1/2] fix(web): cut-off model picker labels show their full
 text on hover

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../web/src/components/chat/ComposerModelEffort.tsx |  7 +++++--
 apps/web/src/components/chat/ModelListRow.tsx       | 13 ++++++-------
 .../web/src/components/chat/ProviderModelPicker.tsx | 12 ++++++++++--
 apps/web/src/lib/utils.ts                           |  8 ++++++++
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/chat/ComposerModelEffort.tsx b/apps/web/src/components/chat/ComposerModelEffort.tsx
index 35fd11c98be7c..b506b53d890c6 100644
--- a/apps/web/src/components/chat/ComposerModelEffort.tsx
+++ b/apps/web/src/components/chat/ComposerModelEffort.tsx
@@ -10,7 +10,7 @@ import { getProviderOptionCurrentLabel } from "@t3tools/shared/model";
 import { CheckIcon, ChevronRightIcon, ChevronUpIcon, WorkflowIcon } from "lucide-react";
 import { type KeyboardEvent, type ReactNode, use, useRef, useState } from "react";
 
-import { cn } from "~/lib/utils";
+import { cn, titleWhenTruncated } from "~/lib/utils";
 import {
   Menu,
   MenuPopup,
@@ -515,7 +515,10 @@ export function ComposerEffortColumn(props: { traits: TraitsSelectionInput | nul
           <span className="text-muted-foreground">
             {controls?.effort?.descriptor.label ?? (controls?.others.length ? "Options" : "Effort")}
           </span>
-          <span className="ms-auto min-w-0 truncate text-muted-foreground text-xs">
+          <span
+            className="ms-auto min-w-0 truncate text-muted-foreground text-xs"
+            onPointerEnter={titleWhenTruncated(picker.modelLabel)}
+          >
             {picker.modelLabel}
           </span>
         </div>
diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index 69da770f1f84b..d840447ea0d77 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -7,7 +7,7 @@ import { Button } from "../ui/button";
 import { Badge } from "../ui/badge";
 import { Kbd } from "../ui/kbd";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
-import { cn } from "~/lib/utils";
+import { cn, titleWhenTruncated } from "~/lib/utils";
 import { modelPickerModelKey } from "./modelPickerKeys";
 import { ProviderInstanceIcon } from "./ProviderInstanceIcon";
 
@@ -69,11 +69,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
       <div className="flex min-w-0 flex-1 items-center gap-2 text-left">
         <div
           className="min-w-0 truncate text-sm font-normal leading-snug"
-          // Names the row in full on hover only when it is cut off.
-          onPointerEnter={(event) => {
-            const name = event.currentTarget;
-            name.title = name.scrollWidth > name.clientWidth ? getDisplayModelName(model) : "";
-          }}
+          onPointerEnter={titleWhenTruncated(getDisplayModelName(model))}
         >
           {getDisplayModelName(model)}
           {/* The logo is decorative, so name the provider for screen readers. */}
@@ -81,7 +77,10 @@ export const ModelListRow = memo(function ModelListRow(props: {
         </div>
         {props.isSelected ? <CheckIcon className="size-3.5 shrink-0" aria-hidden="true" /> : null}
         {props.subProvider ? (
-          <span className="min-w-0 shrink truncate text-xs text-muted-foreground/70">
+          <span
+            className="min-w-0 shrink truncate text-xs text-muted-foreground/70"
+            onPointerEnter={titleWhenTruncated(props.subProvider)}
+          >
             {props.subProvider}
           </span>
         ) : null}
diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx
index 2e47b4c2fe3b4..2c25692ca6926 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.tsx
@@ -9,7 +9,7 @@ import { createContext, memo, type ReactNode, useRef, useState } from "react";
 import { Badge } from "../ui/badge";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
-import { cn } from "~/lib/utils";
+import { cn, titleWhenTruncated } from "~/lib/utils";
 import { ModelPickerContent, resolveModelPickerSelectedModel } from "./ModelPickerContent";
 import { ChatGptSharingControl } from "./ChatGptSharingControl";
 import { ProviderInstanceIcon } from "./ProviderInstanceIcon";
@@ -388,7 +388,15 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
             </span>
           ) : null}
           {props.isComposerOwned ? (
-            <span {...triggerTextProps}>{triggerText}</span>
+            // The composer trigger has no hover tooltip; a cut-off name still shows in full.
+            <span
+              {...triggerTextProps}
+              onPointerEnter={titleWhenTruncated(
+                props.triggerLabel ?? allModelNames ?? triggerLabel,
+              )}
+            >
+              {triggerText}
+            </span>
           ) : (
             <Tooltip>
               <TooltipTrigger render={<span {...triggerTextProps} />}>{triggerText}</TooltipTrigger>
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index 747af2d52dd35..220f2b0be8d99 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -20,6 +20,14 @@ export function cn(...inputs: CxOptions) {
 
 export { isMacPlatform };
 
+/** `onPointerEnter` for a truncating element: shows `text` as its title only when it is cut off. */
+export function titleWhenTruncated(text: string) {
+  return (event: { currentTarget: HTMLElement }) => {
+    const element = event.currentTarget;
+    element.title = element.scrollWidth > element.clientWidth ? text : "";
+  };
+}
+
 export function isWindowsPlatform(platform: string): boolean {
   return /^win(dows)?/i.test(platform);
 }

From 9a39bf75e8c3a69ff6dba963e86e2a9b383ebe78 Mon Sep 17 00:00:00 2001
From: Theo Browne <me@theo.li>
Date: Fri, 6 Nov 2026 02:29:31 -0800
Subject: [PATCH 2/2] fix(web): a changed picker label drops the old title

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ComposerModelEffort.tsx | 2 ++
 apps/web/src/components/chat/ProviderModelPicker.tsx | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/apps/web/src/components/chat/ComposerModelEffort.tsx b/apps/web/src/components/chat/ComposerModelEffort.tsx
index b506b53d890c6..cf6ca59b3eb2d 100644
--- a/apps/web/src/components/chat/ComposerModelEffort.tsx
+++ b/apps/web/src/components/chat/ComposerModelEffort.tsx
@@ -516,6 +516,8 @@ export function ComposerEffortColumn(props: { traits: TraitsSelectionInput | nul
             {controls?.effort?.descriptor.label ?? (controls?.others.length ? "Options" : "Effort")}
           </span>
           <span
+            // A new label must not keep the last one's title while the pointer stays.
+            key={picker.modelLabel}
             className="ms-auto min-w-0 truncate text-muted-foreground text-xs"
             onPointerEnter={titleWhenTruncated(picker.modelLabel)}
           >
diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx
index 2c25692ca6926..25dbcaeac16a0 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.tsx
@@ -390,6 +390,8 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
           {props.isComposerOwned ? (
             // The composer trigger has no hover tooltip; a cut-off name still shows in full.
             <span
+              // A new label must not keep the last one's title while the pointer stays.
+              key={props.triggerLabel ?? allModelNames ?? triggerLabel}
               {...triggerTextProps}
               onPointerEnter={titleWhenTruncated(
                 props.triggerLabel ?? allModelNames ?? triggerLabel,