| author |  Julius Marminge <julius0216@outlook.com> 2026-05-13 10:23:31+02:00 |
| committer |  GitHub <noreply@github.com> 2026-05-13 10:23:31+02:00 |
| log | 7e20b23e7ea5dc1daf4cbfa65d61301d99168bae |
| tree | b6f89ecf0f33b645c15e97870acb942139e03f6f |
| parent | b83e9c95e4f3bd1dcb771ee436dcfafcfaf6b3fa |
| signature | Signed by PGP key B5690EEEBB952194 |
Constrain provider update popover overflow (#2669)
2 files changed, 59 insertions(+), 8 deletions(-)
apps
web
src
components
apps/web/src/components/settings/ProviderInstanceCard.tsx+13-6
| ... | ... | @@ -29,6 +29,7 @@ import { Button } from "../ui/button"; |
| 29 | 29 | import { Collapsible, CollapsibleContent } from "../ui/collapsible"; |
| 30 | 30 | import { DraftInput } from "../ui/draft-input"; |
| 31 | 31 | import { Popover, PopoverPopup, PopoverTrigger } from "../ui/popover"; |
| 32 | import { ScrollArea } from "../ui/scroll-area"; | |
| 32 | 33 | import { Switch } from "../ui/switch"; |
| 33 | 34 | import { stackedThreadToast, toastManager } from "../ui/toast"; |
| 34 | 35 | import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; |
| ... | ... | @@ -697,8 +698,12 @@ export function ProviderInstanceCard({ |
| 697 | 698 | </Button> |
| 698 | 699 | } |
| 699 | 700 | /> |
| 700 | <PopoverPopup side="bottom" align="start" className="w-84"> | |
| 701 | <div className="grid gap-3"> | |
| 701 | <PopoverPopup | |
| 702 | side="bottom" | |
| 703 | align="start" | |
| 704 | className="w-[min(21rem,calc(100vw-1.5rem))] [--popup-width:min(21rem,calc(100vw-1.5rem))]" | |
| 705 | > | |
| 706 | <div className="grid min-w-0 gap-3"> | |
| 702 | 707 | <div className="grid gap-0.5"> |
| 703 | 708 | <p className="text-[13px] font-semibold leading-tight text-foreground"> |
| 704 | 709 | Update available |
| ... | ... | @@ -735,10 +740,12 @@ export function ProviderInstanceCard({ |
| 735 | 740 | </div> |
| 736 | 741 | ) : null} |
| 737 | 742 | {updateCommand ? ( |
| 738 | <div className="flex items-center gap-1 rounded-md border border-border/70 bg-muted/40 py-0.5 pr-0.5 pl-2"> | |
| 739 | <code className="min-w-0 flex-1 overflow-x-auto whitespace-nowrap font-mono text-[11px] text-foreground [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"> | |
| 740 | {updateCommand} | |
| 741 | </code> | |
| 743 | <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"> | |
| 744 | <ScrollArea scrollFade className="h-8 min-w-0 flex-1 rounded-none"> | |
| 745 | <code className="flex h-full w-max items-center whitespace-nowrap pr-3 font-mono text-[11px] text-foreground"> | |
| 746 | {updateCommand} | |
| 747 | </code> | |
| 748 | </ScrollArea> | |
| 742 | 749 | <Tooltip> |
| 743 | 750 | <TooltipTrigger |
| 744 | 751 | render={ |
apps/web/src/components/settings/SettingsPanels.browser.tsx+46-2
| ... | ... | @@ -236,7 +236,10 @@ function createBaseServerConfig(): ServerConfig { |
| 236 | 236 | }; |
| 237 | 237 | } |
| 238 | 238 | |
| 239 | function createOutdatedProvider(driver: string): ServerProvider { | |
| 239 | function createOutdatedProvider( | |
| 240 | driver: string, | |
| 241 | updateCommand = "npm install -g openai/codex@latest", | |
| 242 | ): ServerProvider { | |
| 240 | 243 | return { |
| 241 | 244 | instanceId: ProviderInstanceId.make(driver), |
| 242 | 245 | driver: ProviderDriverKind.make(driver), |
| ... | ... | @@ -255,7 +258,7 @@ function createOutdatedProvider(driver: string): ServerProvider { |
| 255 | 258 | latestVersion: "1.1.0", |
| 256 | 259 | message: "Update available.", |
| 257 | 260 | checkedAt: "2026-05-04T10:00:00.000Z", |
| 258 | updateCommand: "npm install -g openai/codex@latest", | |
| 261 | updateCommand, | |
| 259 | 262 | canUpdate: true, |
| 260 | 263 | }, |
| 261 | 264 | }; |
| ... | ... | @@ -1155,6 +1158,47 @@ describe("GeneralSettingsPanel observability", () => { |
| 1155 | 1158 | instanceId: ProviderInstanceId.make("codex"), |
| 1156 | 1159 | }); |
| 1157 | 1160 | }); |
| 1161 | ||
| 1162 | it("keeps long provider update commands inside the fixed-width popover", async () => { | |
| 1163 | const longUpdateCommand = | |
| 1164 | "npm install -g @anthropic-ai/claude-code@latest --registry=https://registry.npmjs.org --cache=/tmp/t3code-provider-update-cache"; | |
| 1165 | ||
| 1166 | setServerConfigSnapshot({ | |
| 1167 | ...createBaseServerConfig(), | |
| 1168 | providers: [createOutdatedProvider("codex", longUpdateCommand)], | |
| 1169 | }); | |
| 1170 | ||
| 1171 | mounted = await render( | |
| 1172 | <AppAtomRegistryProvider> | |
| 1173 | <ProviderSettingsPanel /> | |
| 1174 | </AppAtomRegistryProvider>, | |
| 1175 | ); | |
| 1176 | ||
| 1177 | await page.getByRole("button", { name: "Update available — view details" }).click(); | |
| 1178 | await expect.element(page.getByText(longUpdateCommand)).toBeInTheDocument(); | |
| 1179 | ||
| 1180 | await vi.waitFor(() => { | |
| 1181 | const popup = document.querySelector<HTMLElement>('[data-slot="popover-popup"]'); | |
| 1182 | const commandCode = Array.from(document.querySelectorAll<HTMLElement>("code")).find( | |
| 1183 | (element) => element.textContent === longUpdateCommand, | |
| 1184 | ); | |
| 1185 | const scrollViewport = commandCode?.closest<HTMLElement>( | |
| 1186 | '[data-slot="scroll-area-viewport"]', | |
| 1187 | ); | |
| 1188 | ||
| 1189 | expect(popup).toBeTruthy(); | |
| 1190 | expect(commandCode).toBeTruthy(); | |
| 1191 | expect(scrollViewport).toBeTruthy(); | |
| 1192 | ||
| 1193 | const popupRect = popup!.getBoundingClientRect(); | |
| 1194 | const viewportRect = scrollViewport!.getBoundingClientRect(); | |
| 1195 | ||
| 1196 | expect(popupRect.width).toBeGreaterThan(300); | |
| 1197 | expect(popupRect.width).toBeLessThanOrEqual(337); | |
| 1198 | expect(viewportRect.right).toBeLessThanOrEqual(popupRect.right + 0.5); | |
| 1199 | expect(scrollViewport!.scrollWidth).toBeGreaterThan(scrollViewport!.clientWidth); | |
| 1200 | }); | |
| 1201 | }); | |
| 1158 | 1202 | }); |
| 1159 | 1203 | |
| 1160 | 1204 | describe("SourceControlSettingsPanel discovery states", () => { |