Constrain provider update popover overflow (pingdotgg#2669)

Author: juliusmarminge

apps/web/src/components/settings/ProviderInstanceCard.tsx

@@ -29,6 +29,7 @@ import { Button } from "../ui/button";
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
 import { DraftInput } from "../ui/draft-input";
 import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover";
+import { ScrollArea } from "../ui/scroll-area";
 import { Switch } from "../ui/switch";
 import { stackedThreadToast, toastManager } from "../ui/toast";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
@@ -697,8 +698,12 @@ export function ProviderInstanceCard({
                       </Button>
                     }
                   />
-                  <PopoverPopup side="bottom" align="start" className="w-84">
-                    <div className="grid gap-3">
+                  <PopoverPopup
+                    side="bottom"
+                    align="start"
+                    className="w-[min(21rem,calc(100vw-1.5rem))] [--popup-width:min(21rem,calc(100vw-1.5rem))]"
+                  >
+                    <div className="grid min-w-0 gap-3">
                       <div className="grid gap-0.5">
                         <p className="text-[13px] font-semibold leading-tight text-foreground">
                           Update available
@@ -735,10 +740,12 @@ export function ProviderInstanceCard({
                         </div>
                       ) : null}
                       {updateCommand ? (
-                        <div className="flex items-center gap-1 rounded-md border border-border/70 bg-muted/40 py-0.5 pr-0.5 pl-2">
-                          <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[11px] text-foreground [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-                            {updateCommand}
-                          </code>
+                        <div className="flex min-w-0 items-center gap-1 rounded-md border border-border/70 bg-muted/40 py-0.5 pr-0.5 pl-2">
+                          <ScrollArea scrollFade className="h-8 min-w-0 flex-1 rounded-none">
+                            <code className="flex h-full w-max items-center whitespace-nowrap pr-3 font-mono text-[11px] text-foreground">
+                              {updateCommand}
+                            </code>
+                          </ScrollArea>
                           <Tooltip>
                             <TooltipTrigger
                               render={

apps/web/src/components/settings/SettingsPanels.browser.tsx

@@ -236,7 +236,10 @@ function createBaseServerConfig(): ServerConfig {
   };
 }
 
-function createOutdatedProvider(driver: string): ServerProvider {
+function createOutdatedProvider(
+  driver: string,
+  updateCommand = "npm install -g openai/codex@latest",
+): ServerProvider {
   return {
     instanceId: ProviderInstanceId.make(driver),
     driver: ProviderDriverKind.make(driver),
@@ -255,7 +258,7 @@ function createOutdatedProvider(driver: string): ServerProvider {
       latestVersion: "1.1.0",
       message: "Update available.",
       checkedAt: "2026-05-04T10:00:00.000Z",
-      updateCommand: "npm install -g openai/codex@latest",
+      updateCommand,
       canUpdate: true,
     },
   };
@@ -1155,6 +1158,47 @@ describe("GeneralSettingsPanel observability", () => {
       instanceId: ProviderInstanceId.make("codex"),
     });
   });
+
+  it("keeps long provider update commands inside the fixed-width popover", async () => {
+    const longUpdateCommand =
+      "npm install -g @anthropic-ai/claude-code@latest --registry=https://registry.npmjs.org --cache=/tmp/t3code-provider-update-cache";
+
+    setServerConfigSnapshot({
+      ...createBaseServerConfig(),
+      providers: [createOutdatedProvider("codex", longUpdateCommand)],
+    });
+
+    mounted = await render(
+      <AppAtomRegistryProvider>
+        <ProviderSettingsPanel />
+      </AppAtomRegistryProvider>,
+    );
+
+    await page.getByRole("button", { name: "Update available — view details" }).click();
+    await expect.element(page.getByText(longUpdateCommand)).toBeInTheDocument();
+
+    await vi.waitFor(() => {
+      const popup = document.querySelector<HTMLElement>('[data-slot="popover-popup"]');
+      const commandCode = Array.from(document.querySelectorAll<HTMLElement>("code")).find(
+        (element) => element.textContent === longUpdateCommand,
+      );
+      const scrollViewport = commandCode?.closest<HTMLElement>(
+        '[data-slot="scroll-area-viewport"]',
+      );
+
+      expect(popup).toBeTruthy();
+      expect(commandCode).toBeTruthy();
+      expect(scrollViewport).toBeTruthy();
+
+      const popupRect = popup!.getBoundingClientRect();
+      const viewportRect = scrollViewport!.getBoundingClientRect();
+
+      expect(popupRect.width).toBeGreaterThan(300);
+      expect(popupRect.width).toBeLessThanOrEqual(337);
+      expect(viewportRect.right).toBeLessThanOrEqual(popupRect.right + 0.5);
+      expect(scrollViewport!.scrollWidth).toBeGreaterThan(scrollViewport!.clientWidth);
+    });
+  });
 });
 
 describe("SourceControlSettingsPanel discovery states", () => {