From 21d744039bf76c072c875886ee497e391a0dd430 Mon Sep 17 00:00:00 2001
From: Matthew Feroz <136640686+MatthewFeroz@users.noreply.github.com>
Date: Thu, 10 Sep 2026 14:36:55 -0400
Subject: [PATCH] fix(web): fit provider update text inside sidebar notices
 (#11034)

---
 .../sidebar/SidebarProviderUpdatePill.tsx        | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx b/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
index 066b7e583253132c6b0512379d2a56436e65704f..7b1d5c25fcf59f60ff0c6787b45c2055fda1c402 100644
--- a/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
+++ b/apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx
@@ -126,7 +126,7 @@ export function SidebarProviderUpdatePill() {
 
   return (
     <div
-      className={`group/provider-update relative flex h-7 w-full items-center overflow-hidden rounded-lg text-xs font-medium transform-gpu transition-all duration-180 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform ${
+      className={`group/provider-update relative flex min-h-7 w-full shrink-0 items-center overflow-hidden rounded-lg text-[11px] leading-4 font-medium transform-gpu transition-all duration-180 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform ${
         PROVIDER_UPDATE_PILL_STYLES[displayedView.tone]
       } ${
         exitingKey === displayedView.key
@@ -170,19 +170,19 @@ export function SidebarProviderUpdatePill() {
             <button
               type="button"
               aria-label={displayedView.description}
-              className="provider-update-main relative z-[1] flex h-full flex-1 items-center gap-2 px-2 text-left"
+              className="provider-update-main relative z-[1] flex min-w-0 flex-1 items-center gap-2 px-2 py-1.5 text-left"
               onClick={openProviderSettings}
             >
               {displayedView.tone === "loading" ? (
-                <Spinner className="size-3.5" />
+                <Spinner className="size-3.5 shrink-0" />
               ) : displayedView.tone === "success" ? (
-                <CircleCheckIcon className="size-3.5" />
+                <CircleCheckIcon className="size-3.5 shrink-0" />
               ) : displayedView.tone === "error" ? (
-                <TriangleAlertIcon className="size-3.5" />
+                <TriangleAlertIcon className="size-3.5 shrink-0" />
               ) : (
-                <DownloadIcon className="size-3.5" />
+                <DownloadIcon className="size-3.5 shrink-0" />
               )}
-              <span>{displayedView.title}</span>
+              <span className="min-w-0 wrap-break-word">{displayedView.title}</span>
             </button>
           }
         />
@@ -199,7 +199,7 @@ export function SidebarProviderUpdatePill() {
                 className="relative z-[1] mr-1 [--control-icon-color:currentColor] rounded-md text-inherit opacity-70 hover:bg-transparent hover:opacity-100"
                 onClick={() => startExit(displayedView.key, null, displayedView.key)}
               >
-                <XIcon className="size-3.5" />
+                <XIcon className="size-3.5 shrink-0" />
               </Button>
             }
           />
-- 
2.54.0