From 124917968e6777870754a827b179543c6018f76d Mon Sep 17 00:00:00 2001
From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com>
Date: Tue, 22 Sep 2026 00:34:05 -0700
Subject: [PATCH] refactor(web): one minimum width for menus, three widths for
 popovers

MenuPopup decided whether to apply its minimum width by scanning the
incoming className for w-/min-w- tokens, and 37 menus picked widths from
fourteen values. Menus size to their content; they now share one minimum
(10rem) and a viewport cap, and no width prop. Popovers hold prose and
forms, so a fixed width is real: width="sm|md|lg" (16, 20, 24rem). Select
lists match their trigger, as SelectPopup already does.

Visible effect: menus that had forced a width of 14-24rem now fit their
content from a 10rem floor; popovers snap to the nearest of three widths
(e.g. 18rem becomes 20rem, 28rem becomes 24rem); the keybinding selects
match their trigger instead of a fixed floor.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/browser/BrowserDeviceToolbar.tsx |  2 +-
 apps/web/src/components/BranchToolbar.tsx     |  2 +-
 apps/web/src/components/DiffPanel.tsx         |  4 ++--
 apps/web/src/components/GitActionsControl.tsx |  6 ++---
 apps/web/src/components/LegacySidebar.tsx     |  2 +-
 .../src/components/ProjectScriptsControl.tsx  |  4 +---
 apps/web/src/components/RightPanelTabs.tsx    | 10 ++-------
 apps/web/src/components/Sidebar.tsx           |  2 +-
 .../components/chat/AssistantCitationChip.tsx |  2 +-
 apps/web/src/components/chat/ChatHeader.tsx   |  1 -
 .../chat/ComposerPendingApprovalActions.tsx   |  7 +-----
 .../components/chat/ContextWindowMeter.tsx    |  3 ++-
 .../src/components/chat/DraftHeroHeadline.tsx |  2 +-
 .../src/components/chat/MessagesTimeline.tsx  |  3 ++-
 apps/web/src/components/chat/OpenInPicker.tsx |  2 +-
 .../chat/SnapShotAttachmentDetails.tsx        |  2 +-
 .../chat/useAutoBalanceUpdateBanner.tsx       |  2 +-
 apps/web/src/components/contextChipParts.tsx  |  3 ++-
 .../components/device/DeviceToolVersions.tsx  |  2 +-
 .../src/components/files/FileBreadcrumbs.tsx  |  1 -
 .../components/preview/PreviewMoreMenu.tsx    |  4 ++--
 .../pullRequest/PullRequestChecksPopover.tsx  |  2 +-
 .../pullRequest/PullRequestCodeTab.tsx        |  2 +-
 .../pullRequest/PullRequestComposer.tsx       |  2 +-
 .../pullRequest/PullRequestDetailPanel.tsx    |  4 ++--
 .../pullRequest/PullRequestListFilters.tsx    |  8 +++----
 .../pullRequest/PullRequestReactions.tsx      |  2 +-
 .../pullRequest/PullRequestStackMenu.tsx      |  2 +-
 .../pullRequest/PullRequestStackPopover.tsx   |  1 -
 .../settings/ConnectionsSettings.tsx          |  4 ++--
 .../settings/EnvironmentIconPicker.tsx        |  2 +-
 .../settings/IntegrationsSettings.tsx         |  6 ++---
 .../settings/KeybindingsSettings.tsx          | 22 ++++---------------
 .../settings/ProjectActionsSettings.tsx       |  2 +-
 .../settings/ProviderInstanceCard.tsx         |  6 +----
 .../settings/SettingInheritance.tsx           |  2 +-
 .../settings/SettingsBreadcrumb.tsx           |  4 +---
 .../components/sidebar/SidebarUpdatePill.tsx  |  2 +-
 apps/web/src/components/ui/menu.tsx           | 10 ++-------
 apps/web/src/components/ui/popover.tsx        | 12 ++++++++++
 apps/web/src/components/usage/UsagePage.tsx   |  2 +-
 .../components/usage/UsagePriceOverrides.tsx  |  2 +-
 apps/web/src/routes/_chat.pull-requests.tsx   |  2 +-
 43 files changed, 69 insertions(+), 98 deletions(-)

diff --git a/apps/web/src/browser/BrowserDeviceToolbar.tsx b/apps/web/src/browser/BrowserDeviceToolbar.tsx
index e8ad80b597ba..cf78e5095a38 100644
--- a/apps/web/src/browser/BrowserDeviceToolbar.tsx
+++ b/apps/web/src/browser/BrowserDeviceToolbar.tsx
@@ -197,7 +197,7 @@ export function BrowserDeviceToolbar({
         >
           <SelectValue />
         </SelectTrigger>
-        <SelectPopup align="start" alignItemWithTrigger={false} className="min-w-64">
+        <SelectPopup align="start" alignItemWithTrigger={false}>
           <SelectItem value={RESPONSIVE_VALUE}>Responsive</SelectItem>
           <SelectGroup>
             <SelectGroupLabel>Standard</SelectGroupLabel>
diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx
index ffc89c33e794..607236f2d63b 100644
--- a/apps/web/src/components/BranchToolbar.tsx
+++ b/apps/web/src/components/BranchToolbar.tsx
@@ -217,7 +217,7 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
         {triggerContent}
         <ChevronDownIcon className="size-3 shrink-0 opacity-50" />
       </MenuTrigger>
-      <MenuPopup align="start" side="top" className="w-64" {...composerFloatingLayerProps}>
+      <MenuPopup align="start" side="top" {...composerFloatingLayerProps}>
         {showEnvironmentPicker && availableEnvironments && onEnvironmentChange ? (
           <>
             <MenuGroup>
diff --git a/apps/web/src/components/DiffPanel.tsx b/apps/web/src/components/DiffPanel.tsx
index 2a598ff12928..ac8623067abe 100644
--- a/apps/web/src/components/DiffPanel.tsx
+++ b/apps/web/src/components/DiffPanel.tsx
@@ -678,7 +678,7 @@ export default function DiffPanel({
             <span className="truncate">{selectedScopeLabel}</span>
             <ChevronDownIcon className="size-3.5 shrink-0 opacity-70" />
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="w-60">
+          <DropdownMenuContent align="start">
             <DropdownMenuRadioGroup value={selectedScopeValue} onValueChange={selectScopeValue}>
               <DropdownMenuRadioItem value="unstaged" closeOnClick>
                 <span>Working tree</span>
@@ -692,7 +692,7 @@ export default function DiffPanel({
             </DropdownMenuRadioGroup>
             <DropdownMenuSub>
               <DropdownMenuSubTrigger>Turn</DropdownMenuSubTrigger>
-              <DropdownMenuSubContent className="w-64">
+              <DropdownMenuSubContent>
                 <DropdownMenuRadioGroup value={selectedTurnValue} onValueChange={selectScopeValue}>
                   {orderedTurnDiffSummaries.map((summary) => {
                     const turnCount =
diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx
index 841adf2fcbb3..4f461ce21cfd 100644
--- a/apps/web/src/components/GitActionsControl.tsx
+++ b/apps/web/src/components/GitActionsControl.tsx
@@ -1793,7 +1793,7 @@ export default function GitActionsControl({
                 <SourceControlIcon className="size-4" />
                 <MenuItemLabel>Git actions</MenuItemLabel>
               </MenuSubTrigger>
-              <MenuSubPopup className="min-w-32 max-w-[calc(100vw-2rem)]">{gitItems}</MenuSubPopup>
+              <MenuSubPopup>{gitItems}</MenuSubPopup>
             </MenuSub>
           </>
         )
@@ -1859,9 +1859,7 @@ export default function GitActionsControl({
             >
               <ChevronDownIcon aria-hidden="true" className="size-4" />
             </MenuTrigger>
-            <MenuPopup align="end" className="w-full">
-              {gitItems}
-            </MenuPopup>
+            <MenuPopup align="end">{gitItems}</MenuPopup>
           </Menu>
         </Group>
       )}
diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index f891e73694e6..34ec83fb4b12 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -2747,7 +2747,7 @@ function ProjectSortMenu({
         </TooltipTrigger>
         <TooltipPopup side="right">Sidebar options</TooltipPopup>
       </Tooltip>
-      <MenuPopup align="end" side="bottom" className="min-w-52">
+      <MenuPopup align="end" side="bottom">
         <MenuGroup>
           <div className="px-2 py-1 sm:text-xs font-medium text-muted-foreground">
             Sort projects
diff --git a/apps/web/src/components/ProjectScriptsControl.tsx b/apps/web/src/components/ProjectScriptsControl.tsx
index c1104824bedc..eb186ea72f5d 100644
--- a/apps/web/src/components/ProjectScriptsControl.tsx
+++ b/apps/web/src/components/ProjectScriptsControl.tsx
@@ -258,9 +258,7 @@ export default function ProjectScriptsControl({
                 <ScriptIcon icon="play" className="size-4" />
                 <MenuItemLabel>Project actions</MenuItemLabel>
               </MenuSubTrigger>
-              <MenuSubPopup className="min-w-32 max-w-[calc(100vw-2rem)]">
-                {scriptItems}
-              </MenuSubPopup>
+              <MenuSubPopup>{scriptItems}</MenuSubPopup>
             </MenuSub>
           ) : (
             <MenuItem
diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
index de2a0d61ee42..d88b1309f0ad 100644
--- a/apps/web/src/components/RightPanelTabs.tsx
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -567,12 +567,7 @@ function RightPanelEmptyState(props: {
                     >
                       <ChevronDown className="size-3.5" />
                     </MenuTrigger>
-                    <MenuPopup
-                      align="end"
-                      side="bottom"
-                      sideOffset={6}
-                      className="min-w-40 max-w-56"
-                    >
+                    <MenuPopup align="end" side="bottom" sideOffset={6} className="max-w-56">
                       {props.browserProfiles.map((profile) => (
                         <MenuItem
                           key={profile.id}
@@ -1273,7 +1268,6 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
                   align="start"
                   side="bottom"
                   sideOffset={6}
-                  className="min-w-44"
                   onKeyDownCapture={handleAddSurfaceMenuKeyDown}
                 >
                   {addSurfaceActions.map((action) => {
@@ -1314,7 +1308,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
                             and run to 48 characters, which would otherwise widen
                             the popup to fit-content and wrap.
                           */}
-                          <MenuSubPopup className="min-w-40 max-w-56">
+                          <MenuSubPopup className="max-w-56">
                             {browserProfiles.map((profile) => (
                               <MenuItem
                                 key={profile.id}
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 8740949ed0bf..90a3fb9864fb 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -475,7 +475,7 @@ function SnoozePopoverButton(props: {
         </TooltipTrigger>
         <TooltipPopup>Snooze thread</TooltipPopup>
       </Tooltip>
-      <PopoverPopup side="bottom" align="end" className="w-56" viewportClassName="p-1">
+      <PopoverPopup side="bottom" align="end" width="sm" viewportClassName="p-1">
         {presets.map((preset) => (
           <button
             key={preset.id}
diff --git a/apps/web/src/components/chat/AssistantCitationChip.tsx b/apps/web/src/components/chat/AssistantCitationChip.tsx
index a207aad42453..01ff20bf79c3 100644
--- a/apps/web/src/components/chat/AssistantCitationChip.tsx
+++ b/apps/web/src/components/chat/AssistantCitationChip.tsx
@@ -186,7 +186,7 @@ export function AssistantCitationChip({
                 return false;
               }}
               aria-label="Edit citation comment"
-              className="w-72 max-w-[calc(100vw-1rem)]"
+              width="md"
               viewportClassName="p-3"
               onPointerDown={(event) => event.stopPropagation()}
             >
diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index 1c8bc520485f..d03b7b613eb1 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -516,7 +516,6 @@ export const ChatHeader = memo(function ChatHeader({
             keepMounted
             aria-label="Header actions"
             align="end"
-            className="min-w-56 max-w-[calc(100vw-2rem)]"
             finalFocus={actionsCollapsed ? undefined : false}
           >
             <div ref={mountMenuActions} className="contents" />
diff --git a/apps/web/src/components/chat/ComposerPendingApprovalActions.tsx b/apps/web/src/components/chat/ComposerPendingApprovalActions.tsx
index cebdf7d1cd50..385e6aaf42b0 100644
--- a/apps/web/src/components/chat/ComposerPendingApprovalActions.tsx
+++ b/apps/web/src/components/chat/ComposerPendingApprovalActions.tsx
@@ -73,12 +73,7 @@ export const ComposerPendingApprovalActions = memo(function ComposerPendingAppro
           >
             <EllipsisIcon />
           </MenuTrigger>
-          <MenuPopup
-            {...composerFloatingLayerProps}
-            side="top"
-            align="end"
-            className="w-56 max-w-[calc(100vw-2rem)]"
-          >
+          <MenuPopup {...composerFloatingLayerProps} side="top" align="end">
             {moreOptions.map((option) => {
               const item = (
                 <MenuItem
diff --git a/apps/web/src/components/chat/ContextWindowMeter.tsx b/apps/web/src/components/chat/ContextWindowMeter.tsx
index 3e52f6e2d86d..866ae68cd0ab 100644
--- a/apps/web/src/components/chat/ContextWindowMeter.tsx
+++ b/apps/web/src/components/chat/ContextWindowMeter.tsx
@@ -89,7 +89,8 @@ export function ContextWindowMeter(props: {
         side="top"
         align="end"
         viewportClassName="p-0"
-        className="w-64 max-w-none text-left whitespace-normal"
+        width="sm"
+        className="text-left whitespace-normal"
       >
         <div className="flex flex-col gap-2 p-[var(--floating-content-inset)]">
           <div className="flex items-center justify-between gap-3">
diff --git a/apps/web/src/components/chat/DraftHeroHeadline.tsx b/apps/web/src/components/chat/DraftHeroHeadline.tsx
index 89f5c103d0a6..6e4e800ab09b 100644
--- a/apps/web/src/components/chat/DraftHeroHeadline.tsx
+++ b/apps/web/src/components/chat/DraftHeroHeadline.tsx
@@ -149,7 +149,7 @@ export function DraftHeroHeadline({
           <TooltipPopup side="top">{activeProjectDisplayName}</TooltipPopup>
         ) : null}
       </Tooltip>
-      <MenuPopup align="center" className="max-h-80 min-w-40! w-max max-w-64 overflow-y-auto">
+      <MenuPopup align="center" className="max-h-80 overflow-y-auto">
         <MenuRadioGroup
           value={activeProjectKey}
           onValueChange={(value) => {
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 6c312ee439c0..43adf7907dbf 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -2571,7 +2571,8 @@ function BackgroundWorktreeSetupChip({ snapshot }: { snapshot: WorktreeSetupSnap
       <PopoverPopup
         side="bottom"
         align="end"
-        className="surface-glass! w-[28rem] max-w-[calc(100vw-2rem)]"
+        width="lg"
+        className="surface-glass!"
         viewportClassName="py-3 [--viewport-inline-padding:--spacing(3)]"
       >
         <WorktreeSetupCard
diff --git a/apps/web/src/components/chat/OpenInPicker.tsx b/apps/web/src/components/chat/OpenInPicker.tsx
index e272345a345f..35a75a20a36e 100644
--- a/apps/web/src/components/chat/OpenInPicker.tsx
+++ b/apps/web/src/components/chat/OpenInPicker.tsx
@@ -343,7 +343,7 @@ export const OpenInPicker = memo(function OpenInPicker({
             <SquareArrowOutUpRightIcon className="size-4" />
             <MenuItemLabel>Open in…</MenuItemLabel>
           </MenuSubTrigger>
-          <MenuSubPopup className="min-w-32 max-w-[calc(100vw-2rem)]">{editorItems}</MenuSubPopup>
+          <MenuSubPopup>{editorItems}</MenuSubPopup>
         </MenuSub>
       </>
     );
diff --git a/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx b/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
index f781f1fbfa02..82ab5eeca500 100644
--- a/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
+++ b/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
@@ -166,7 +166,7 @@ export function SnapShotContentsButton({
       <PopoverPopup
         side={side}
         align="center"
-        className="w-[min(24rem,calc(100vw-2rem))]"
+        width="md"
         viewportClassName="max-h-[min(28rem,70vh)]"
       >
         <div className="space-y-2">
diff --git a/apps/web/src/components/chat/useAutoBalanceUpdateBanner.tsx b/apps/web/src/components/chat/useAutoBalanceUpdateBanner.tsx
index 0d4584533980..fa6efe6e4e27 100644
--- a/apps/web/src/components/chat/useAutoBalanceUpdateBanner.tsx
+++ b/apps/web/src/components/chat/useAutoBalanceUpdateBanner.tsx
@@ -100,7 +100,7 @@ export function useAutoBalanceUpdateBanner(
         >
           {title}
         </PopoverTrigger>
-        <PopoverPopup side="top" align="start" className="w-80 max-w-[calc(100vw-2rem)]">
+        <PopoverPopup side="top" align="start" width="md">
           <div className="space-y-3 text-xs">
             {machines.map((machine) => (
               <div key={machine.environmentId} className="space-y-1">
diff --git a/apps/web/src/components/contextChipParts.tsx b/apps/web/src/components/contextChipParts.tsx
index 691fd2ec33c2..5b2a1684f62e 100644
--- a/apps/web/src/components/contextChipParts.tsx
+++ b/apps/web/src/components/contextChipParts.tsx
@@ -102,7 +102,8 @@ export function ContextChipPopover(props: {
       </PopoverTrigger>
       <PopoverPopup
         side="top"
-        className={cn("w-[min(36rem,calc(100vw-2rem))]", props.popupClassName)}
+        width="lg"
+        className={props.popupClassName}
         viewportClassName={cn("overflow-x-auto p-2", props.viewportClassName)}
       >
         <PopoverTitle className="sr-only">{props.accessibleLabel}</PopoverTitle>
diff --git a/apps/web/src/components/device/DeviceToolVersions.tsx b/apps/web/src/components/device/DeviceToolVersions.tsx
index cf39aeea5439..935f70217258 100644
--- a/apps/web/src/components/device/DeviceToolVersions.tsx
+++ b/apps/web/src/components/device/DeviceToolVersions.tsx
@@ -44,7 +44,7 @@ export function DeviceToolVersions({
             ? "Versions unavailable"
             : "Versions"}
       </PopoverTrigger>
-      <PopoverPopup align="end" className="w-80">
+      <PopoverPopup align="end" width="md">
         <PopoverTitle>{kind ? label : "Device tools"}</PopoverTitle>
         {tools ? (
           <div className="mt-4 divide-y divide-border/50">
diff --git a/apps/web/src/components/files/FileBreadcrumbs.tsx b/apps/web/src/components/files/FileBreadcrumbs.tsx
index 01bec38f343e..f50db1f01089 100644
--- a/apps/web/src/components/files/FileBreadcrumbs.tsx
+++ b/apps/web/src/components/files/FileBreadcrumbs.tsx
@@ -104,7 +104,6 @@ function BreadcrumbMenuContent(props: {
     <MenuPopup
       align="start"
       side="bottom"
-      className="w-max min-w-32 max-w-[min(19rem,var(--available-width))]"
       onKeyDown={(event) => {
         if (event.key !== "ArrowLeft" || !canGoBack || parentPath === null) return;
         event.preventDefault();
diff --git a/apps/web/src/components/preview/PreviewMoreMenu.tsx b/apps/web/src/components/preview/PreviewMoreMenu.tsx
index 7080fb5238f4..92a10928fe3f 100644
--- a/apps/web/src/components/preview/PreviewMoreMenu.tsx
+++ b/apps/web/src/components/preview/PreviewMoreMenu.tsx
@@ -108,7 +108,7 @@ export function PreviewMoreMenu({
         </TooltipTrigger>
         <TooltipPopup>More</TooltipPopup>
       </Tooltip>
-      <MenuPopup align="end" sideOffset={6} className="min-w-56">
+      <MenuPopup align="end" sideOffset={6}>
         <MenuItem onClick={callTab(bridge.hardReload)} disabled={tabDisabled}>
           Hard reload
         </MenuItem>
@@ -125,7 +125,7 @@ export function PreviewMoreMenu({
         </MenuItem>
         <MenuSub>
           <MenuSubTrigger disabled={tabDisabled}>Appearance</MenuSubTrigger>
-          <MenuSubPopup className="min-w-32">
+          <MenuSubPopup>
             <MenuRadioGroup
               value={colorScheme}
               onValueChange={(value) => {
diff --git a/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx b/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx
index e9797016aad7..b000674077b0 100644
--- a/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx
@@ -147,7 +147,7 @@ export function PullRequestChecksPopover({
       >
         <presentation.Icon aria-hidden className={cn("size-3.5", presentation.toneClassName)} />
       </PopoverTrigger>
-      <PopoverPopup align="start" className="w-80 max-w-full" side="bottom">
+      <PopoverPopup align="start" width="md" side="bottom">
         <p className="mb-2 font-medium text-sm">{presentation.label}</p>
         {summary === null ? null : <p className="mb-2 text-muted-foreground text-xs">{summary}</p>}
         {stale ? (
diff --git a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
index aa56ac66d199..f4b377f1ab13 100644
--- a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
@@ -1077,7 +1077,7 @@ function PullRequestCodeTab({
               <span className="truncate">{scopeLabel}</span>
               <ChevronDownIcon className="size-3.5 shrink-0 opacity-70" />
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="w-80">
+            <DropdownMenuContent align="start">
               <DropdownMenuRadioGroup
                 value={commit ?? "all"}
                 onValueChange={(value) => onSelectedCommitChange(value === "all" ? null : value)}
diff --git a/apps/web/src/components/pullRequest/PullRequestComposer.tsx b/apps/web/src/components/pullRequest/PullRequestComposer.tsx
index 98a03c0f36ce..84bc10ff448d 100644
--- a/apps/web/src/components/pullRequest/PullRequestComposer.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestComposer.tsx
@@ -110,7 +110,7 @@ export function PullRequestComposer({
         side="top"
         align="end"
         sideOffset={8}
-        className="w-96 max-w-[calc(100vw-2rem)]"
+        width="lg"
         initialFocus={mode === "review" ? reviewRef : commentRef}
         aria-label="Pull request composer"
       >
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index eca025f4db08..3155ad665150 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -1569,7 +1569,7 @@ export function PullRequestDetailPanel({
           />
           <TooltipPopup>Check out this pull request</TooltipPopup>
         </Tooltip>
-        <MenuPopup align="end" side="bottom" className="min-w-72">
+        <MenuPopup align="end" side="bottom">
           <MenuItem onClick={() => startCheckout("worktree")}>
             <GitBranchIcon className="mt-1 size-3.5 shrink-0 self-start" />
             <span className="flex min-w-0 flex-col">
@@ -2020,7 +2020,7 @@ export function PullRequestDetailPanel({
                     {refreshing ? "Refreshing pull request" : "More pull request actions"}
                   </TooltipPopup>
                 </Tooltip>
-                <MenuPopup align="end" side="bottom" className="min-w-72">
+                <MenuPopup align="end" side="bottom">
                   <PullRequestThreadLinks
                     display="menu-item"
                     environmentId={environmentId}
diff --git a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
index c627ff998287..0cbfde70dfd8 100644
--- a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
@@ -232,7 +232,7 @@ function PullRequestFilterRadioSubmenu<Value extends string>({
           {current.label}
         </span>
       </MenuSubTrigger>
-      <MenuSubPopup className="min-w-56">
+      <MenuSubPopup>
         <PullRequestFilterRadioGroup
           label={label}
           value={value}
@@ -277,7 +277,7 @@ function PullRequestAuthorFilter({
           {value ?? "Anyone"}
         </span>
       </MenuSubTrigger>
-      <MenuSubPopup className="w-80">
+      <MenuSubPopup>
         <div className="p-1 pb-2">
           <InputGroup>
             <InputGroupAddon>
@@ -346,7 +346,7 @@ function PullRequestLabelFilter({
           {value.length === 0 ? "Any" : `${value.length} selected`}
         </span>
       </MenuSubTrigger>
-      <MenuSubPopup className="w-72">
+      <MenuSubPopup>
         {visible.length === 0 ? (
           <MenuItem disabled>No labels in this view</MenuItem>
         ) : (
@@ -509,7 +509,7 @@ export function PullRequestFiltersMenu({
           </span>
         ) : null}
       </MenuTrigger>
-      <MenuPopup align="end" side="bottom" className="w-56">
+      <MenuPopup align="end" side="bottom">
         <PullRequestFilterRadioSubmenu
           label="State"
           value={state}
diff --git a/apps/web/src/components/pullRequest/PullRequestReactions.tsx b/apps/web/src/components/pullRequest/PullRequestReactions.tsx
index 82e80b86c2f7..22101b037a5a 100644
--- a/apps/web/src/components/pullRequest/PullRequestReactions.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestReactions.tsx
@@ -134,7 +134,7 @@ export function PullRequestReactionBar({
           >
             <SmilePlusIcon aria-hidden className="size-3.5" />
           </PopoverTrigger>
-          <PopoverPopup align="start" className="w-auto" side="top" viewportClassName="py-2">
+          <PopoverPopup align="start" side="top" viewportClassName="py-2">
             <div className="flex items-center gap-0.5">
               {PULL_REQUEST_REACTION_ORDER.map((content) => {
                 const reacted =
diff --git a/apps/web/src/components/pullRequest/PullRequestStackMenu.tsx b/apps/web/src/components/pullRequest/PullRequestStackMenu.tsx
index 28fc9cdc67f0..61eeed0f0f32 100644
--- a/apps/web/src/components/pullRequest/PullRequestStackMenu.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestStackMenu.tsx
@@ -145,7 +145,7 @@ export function PullRequestStackMenu({
             {notice ? ` · ${notice}` : null}
           </TooltipPopup>
         </Tooltip>
-        <MenuPopup align="start" className="w-96 max-w-[calc(100vw-2rem)]">
+        <MenuPopup align="start">
           <MenuGroup>
             <PullRequestStackHeader number={stack.number} notice={notice} stale={!!onRetry} />
             {onRetry ? <MenuItem onClick={onRetry}>Retry stack refresh</MenuItem> : null}
diff --git a/apps/web/src/components/pullRequest/PullRequestStackPopover.tsx b/apps/web/src/components/pullRequest/PullRequestStackPopover.tsx
index 9f2267e4572c..b15aad925e5f 100644
--- a/apps/web/src/components/pullRequest/PullRequestStackPopover.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestStackPopover.tsx
@@ -85,7 +85,6 @@ export function PullRequestStackPopover({
       </Tooltip>
       <MenuPopup
         align="start"
-        className="w-96 max-w-[calc(100vw-2rem)]"
         onClick={(event) => event.stopPropagation()}
         onKeyDown={(event) => event.stopPropagation()}
       >
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index 81040f84c9e4..c32051ee7513 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -1631,7 +1631,7 @@ function SavedBackendListRow({
         >
           <EllipsisIcon className="size-3.5" />
         </MenuTrigger>
-        <MenuPopup align="end" className="min-w-52">
+        <MenuPopup align="end">
           <EnvironmentIconMenu
             environmentId={environmentId}
             serverConfig={environment.serverConfig}
@@ -3295,7 +3295,7 @@ export function ConnectionsSettings() {
                   >
                     <EllipsisIcon className="size-3.5" />
                   </MenuTrigger>
-                  <MenuPopup align="end" className="min-w-52">
+                  <MenuPopup align="end">
                     <EnvironmentIconMenu
                       environmentId={primaryEnvironmentId}
                       serverConfig={primaryServerConfig}
diff --git a/apps/web/src/components/settings/EnvironmentIconPicker.tsx b/apps/web/src/components/settings/EnvironmentIconPicker.tsx
index b3b33fab0252..a7e61a3b47f8 100644
--- a/apps/web/src/components/settings/EnvironmentIconPicker.tsx
+++ b/apps/web/src/components/settings/EnvironmentIconPicker.tsx
@@ -99,7 +99,7 @@ export function EnvironmentIconMenu({
         <EnvironmentMachineIcon kind={resolved} />
         Icon
       </MenuSubTrigger>
-      <MenuSubPopup className="min-w-44">
+      <MenuSubPopup>
         {lock !== null ? (
           <>
             <MenuItem disabled className="whitespace-normal text-xs">
diff --git a/apps/web/src/components/settings/IntegrationsSettings.tsx b/apps/web/src/components/settings/IntegrationsSettings.tsx
index b6b4a77b7c04..a37dfa17363e 100644
--- a/apps/web/src/components/settings/IntegrationsSettings.tsx
+++ b/apps/web/src/components/settings/IntegrationsSettings.tsx
@@ -304,7 +304,7 @@ function BrowserViewportSetting({ disabled }: { readonly disabled: boolean }) {
             >
               <SelectValue>{viewportSelectLabel(viewport)}</SelectValue>
             </SelectTrigger>
-            <SelectPopup align="end" alignItemWithTrigger={false} className="min-w-64">
+            <SelectPopup align="end" alignItemWithTrigger={false}>
               <SelectItem value={FILL_VALUE}>Fill panel</SelectItem>
               <SelectItem value={RESPONSIVE_VALUE}>Responsive</SelectItem>
               <SelectGroup>
@@ -1183,7 +1183,7 @@ function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
             <PlusIcon />
             Add profile
           </MenuTrigger>
-          <MenuPopup align="end" className="min-w-56">
+          <MenuPopup align="end">
             <MenuItem
               disabled={!settingsHydrated || atProfileLimit}
               onClick={() => createProfile("New profile")}
@@ -1301,7 +1301,7 @@ function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
                 >
                   <MoreVertical />
                 </MenuTrigger>
-                <MenuPopup align="end" className="min-w-44">
+                <MenuPopup align="end">
                   <MenuItem
                     disabled={!settingsHydrated || isDefault}
                     onClick={() => {
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index 57f9fff4d4aa..1fc1eba01aef 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -324,12 +324,7 @@ function WhenVariableSelect({
           <UnknownWhenVariableWarning identifiers={unknownIdentifiers} focusable={false} />
         ) : null}
       </SelectTrigger>
-      <SelectContent
-        alignItemWithTrigger={false}
-        matchTriggerWidth={false}
-        popupClassName="w-fit"
-        className="max-h-72 w-fit min-w-44"
-      >
+      <SelectContent alignItemWithTrigger={false} matchTriggerWidth={false} className="max-h-72">
         {options.map((option) => (
           <SelectItem key={option} value={option} className="min-h-7 w-full py-1 text-[12px]">
             <span className="truncate">{option}</span>
@@ -534,12 +529,7 @@ function WhenExpressionNodeEditor({
           <SelectTrigger size="compact" className="w-24">
             <SelectValue />
           </SelectTrigger>
-          <SelectContent
-            alignItemWithTrigger={false}
-            matchTriggerWidth={false}
-            popupClassName="w-fit"
-            className="w-fit min-w-24"
-          >
+          <SelectContent alignItemWithTrigger={false} matchTriggerWidth={false}>
             <SelectItem value="and" className="min-h-7 py-1 text-[12px]">
               and
             </SelectItem>
@@ -956,7 +946,7 @@ function KeybindingRowMenu({
       >
         <EllipsisIcon className="size-3.5" />
       </MenuTrigger>
-      <MenuPopup align="end" className="min-w-36">
+      <MenuPopup align="end">
         {canReset ? (
           <MenuItem disabled={isSaving} onClick={() => onReset(row)}>
             Reset to default
@@ -1153,11 +1143,7 @@ function NewKeybindingCommandSelect({
       <SelectTrigger size="sm" className={className}>
         <SelectValue placeholder="Command" />
       </SelectTrigger>
-      <SelectContent
-        alignItemWithTrigger={false}
-        matchTriggerWidth={false}
-        className="max-h-72 w-fit min-w-56"
-      >
+      <SelectContent alignItemWithTrigger={false} matchTriggerWidth={false} className="max-h-72">
         {commandOptions.map((command) => (
           <SelectItem key={command} value={command} className="min-h-7 w-full py-1 text-[12px]">
             <span className="truncate">{commandLabel(command)}</span>
diff --git a/apps/web/src/components/settings/ProjectActionsSettings.tsx b/apps/web/src/components/settings/ProjectActionsSettings.tsx
index edbde5e7439a..f9b7b44ec0c8 100644
--- a/apps/web/src/components/settings/ProjectActionsSettings.tsx
+++ b/apps/web/src/components/settings/ProjectActionsSettings.tsx
@@ -156,7 +156,7 @@ export function ProjectActionsSettings() {
                   Import scripts
                   <ChevronDownIcon className="size-3.5" />
                 </MenuTrigger>
-                <MenuPopup align="end" className="w-72">
+                <MenuPopup align="end">
                   <MenuGroup>
                     <MenuGroupLabel>Import from t3.json</MenuGroupLabel>
                     <p className="px-2 pb-2 text-pretty text-sm text-muted-foreground">
diff --git a/apps/web/src/components/settings/ProviderInstanceCard.tsx b/apps/web/src/components/settings/ProviderInstanceCard.tsx
index cfad142fbef4..2aa765df06b7 100644
--- a/apps/web/src/components/settings/ProviderInstanceCard.tsx
+++ b/apps/web/src/components/settings/ProviderInstanceCard.tsx
@@ -708,11 +708,7 @@ export function ProviderInstanceCard({
                 </Button>
               }
             />
-            <PopoverPopup
-              side="bottom"
-              align="end"
-              className="w-[min(21rem,calc(100vw-1.5rem))] [--popup-width:min(21rem,calc(100vw-1.5rem))]"
-            >
+            <PopoverPopup side="bottom" align="end" width="md">
               <div className="grid min-w-0 gap-3">
                 <div className="grid gap-0.5">
                   <p className="text-[13px] font-semibold leading-tight text-foreground">
diff --git a/apps/web/src/components/settings/SettingInheritance.tsx b/apps/web/src/components/settings/SettingInheritance.tsx
index 490237262e03..da524448f0b2 100644
--- a/apps/web/src/components/settings/SettingInheritance.tsx
+++ b/apps/web/src/components/settings/SettingInheritance.tsx
@@ -225,7 +225,7 @@ export function SettingInheritance({
       </Tooltip>
       <PopoverPopup
         align="start"
-        className="w-72 max-w-[calc(100vw-2rem)]"
+        width="md"
         viewportClassName="p-0 [--viewport-inline-padding:0px]"
       >
         <div className="divide-y divide-border/60">
diff --git a/apps/web/src/components/settings/SettingsBreadcrumb.tsx b/apps/web/src/components/settings/SettingsBreadcrumb.tsx
index a21b58d03e0b..9cb5418f20e6 100644
--- a/apps/web/src/components/settings/SettingsBreadcrumb.tsx
+++ b/apps/web/src/components/settings/SettingsBreadcrumb.tsx
@@ -119,9 +119,7 @@ function ScopeMenu({
         {icon}
         <span className="min-w-0 truncate">{label}</span>
       </MenuTrigger>
-      <MenuPopup align="start" className="w-64 max-w-[calc(100vw-2rem)]">
-        {children}
-      </MenuPopup>
+      <MenuPopup align="start">{children}</MenuPopup>
     </Menu>
   );
 }
diff --git a/apps/web/src/components/sidebar/SidebarUpdatePill.tsx b/apps/web/src/components/sidebar/SidebarUpdatePill.tsx
index a94b7801ecfd..613d329bbeef 100644
--- a/apps/web/src/components/sidebar/SidebarUpdatePill.tsx
+++ b/apps/web/src/components/sidebar/SidebarUpdatePill.tsx
@@ -393,7 +393,7 @@ function SidebarUpdateControl() {
           <PopoverPopup
             align="center"
             aria-label="Nightly update release notes"
-            className="max-w-none text-balance shadow-xl shadow-black/25"
+            className="text-balance shadow-xl shadow-black/25"
             initialFocus={false}
             onKeyDownCapture={(event) => {
               if (
diff --git a/apps/web/src/components/ui/menu.tsx b/apps/web/src/components/ui/menu.tsx
index 131c15823d96..a8687dcdbc7d 100644
--- a/apps/web/src/components/ui/menu.tsx
+++ b/apps/web/src/components/ui/menu.tsx
@@ -35,13 +35,6 @@ function MenuPopup({
   anchor?: MenuPrimitive.Positioner.Props["anchor"];
   keepMounted?: boolean;
 }) {
-  const hasExplicitWidthClass =
-    typeof className === "string" &&
-    className.split(/\s+/).some((classToken) => {
-      const utility = classToken.split(":").at(-1) ?? classToken;
-      return /^(?:min-|max-)?w-/.test(utility);
-    });
-
   return (
     <MenuPrimitive.Portal keepMounted={keepMounted}>
       <MenuPrimitive.Positioner
@@ -60,7 +53,8 @@ function MenuPopup({
             // the Review panel header). Drag hit-testing ignores z-index, so
             // the topmost row would stay unhoverable without this opt-out.
             "[-webkit-app-region:no-drag]",
-            !hasExplicitWidthClass && "min-w-32",
+            // Menus size to their content from one minimum, never past the viewport.
+            "min-w-[min(10rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)]",
             className,
           )}
           data-slot="menu-popup"
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index 646f2adb9e24..40cfd7b6f577 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -16,10 +16,20 @@ function PopoverTrigger({ className, children, ...props }: PopoverPrimitive.Trig
   );
 }
 
+// Popovers hold prose and forms, so a width is fixed rather than a minimum,
+// and every width is capped to the viewport.
+const popoverPopupWidthClassName = {
+  auto: "",
+  sm: "w-64",
+  md: "w-80",
+  lg: "w-96",
+} as const;
+
 function PopoverPopup({
   children,
   className,
   viewportClassName,
+  width = "auto",
   side = "bottom",
   align = "center",
   sideOffset = 4,
@@ -37,6 +47,7 @@ function PopoverPopup({
   tooltipStyle?: boolean;
   keepMounted?: PopoverPrimitive.Portal.Props["keepMounted"];
   anchor?: PopoverPrimitive.Positioner.Props["anchor"];
+  width?: keyof typeof popoverPopupWidthClassName;
 }) {
   // Viewport rekeys its children when the active trigger clears on close. Persistent
   // single-trigger forms need a stable container to retain drafts and submit guards.
@@ -59,6 +70,7 @@ function PopoverPopup({
               "w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]",
             !tooltipStyle &&
               "shadow-[0_16px_40px_-18px_rgb(0_0_0/55%)] dark:shadow-[0_18px_44px_-18px_rgb(0_0_0/80%)]",
+            width !== "auto" && ["max-w-[calc(100vw-2rem)]", popoverPopupWidthClassName[width]],
             className,
           )}
           data-slot="popover-popup"
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 02650a16edce..4f3d9f5c514f 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -762,7 +762,7 @@ function UsageEnvironmentFilter({
             )}
           </span>
         </MenuTrigger>
-        <MenuPopup align="start" className="w-80 max-w-[calc(100vw-2rem)]">
+        <MenuPopup align="start">
           <MenuCheckboxItem
             checked={allSelected}
             closeOnClick={false}
diff --git a/apps/web/src/components/usage/UsagePriceOverrides.tsx b/apps/web/src/components/usage/UsagePriceOverrides.tsx
index 1fdeb67ae9b4..5b9388fe1d7f 100644
--- a/apps/web/src/components/usage/UsagePriceOverrides.tsx
+++ b/apps/web/src/components/usage/UsagePriceOverrides.tsx
@@ -269,7 +269,7 @@ export function UsagePriceOverrides({
                   </span>
                   <ChevronDownIcon className="size-3.5 shrink-0" aria-hidden />
                 </MenuTrigger>
-                <MenuPopup align="start" className="w-80 max-w-[calc(100vw-2rem)]">
+                <MenuPopup align="start">
                   <MenuCheckboxItem
                     checked={selectedIds === null}
                     closeOnClick={false}
diff --git a/apps/web/src/routes/_chat.pull-requests.tsx b/apps/web/src/routes/_chat.pull-requests.tsx
index 1e540d64634b..7ee321c55ce7 100644
--- a/apps/web/src/routes/_chat.pull-requests.tsx
+++ b/apps/web/src/routes/_chat.pull-requests.tsx
@@ -2259,7 +2259,7 @@ function CompactFilterMenu<Value extends string>({
           </>
         )}
       </MenuTrigger>
-      <MenuPopup align="start" side="bottom" className="min-w-40">
+      <MenuPopup align="start" side="bottom">
         <MenuRadioGroup value={value} onValueChange={(next) => onChange(next as Value)}>
           {options.map((option) => {
             const item = (