refactor(web): ui components drop their secondary className props

Several components/ui exports took a second className for an inner part
(viewportClassName, popupClassName, inputClassName, contentClassName,
backdropClassName, wrapperClassName). Each was a restyle hatch the lint
rule could not see.

- Popover: padding="default" | "compact" | "none" names the three
  insets callers actually wanted (dense lists and excerpts, and content
  that draws its own frame). None rounds the viewport so edge-to-edge
  content clips to the popup's corners.
- Sheet: sheets sit at a fixed tier (46), under the floating preview
  player (47-49) and under dialogs (50), so the right-panel sheet no
  longer needs a flag to drop below the player.
- Dialog: the media variant owns its own layering and centering.
- ComboboxItem content always lays out as one row: a truncating label,
  then trailing meta. Every consumer already had that shape.
- The model picker search uses ComboboxSearchInput like the branch
  picker, which deletes inputClassName.
- The sidebar snooze list is a Menu with MenuItem and MenuShortcut
  instead of hand-built buttons in a popover.
- An input addon that holds a button takes clicks, so the command
  palette's back arrow no longer needs wrapperClassName.
- Select popupClassName had no callers.

no-restyle findings: 604 -> 583.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: juliusmarminge

apps/web/src/components/ChatView.tsx

@@ -10378,7 +10378,6 @@ export default function ChatView(props: ChatViewProps) {
         <RightPanelSheet
           animationDurationMs={panelAnimationsActive ? panelAnimationDurationMs : 0}
           open={rightPanelOpen}
-          underFloatingPreview={previewMiniPlayerVisible}
           onClose={closePreviewPanel}
         >
           <RightPanelTabs

apps/web/src/components/CommandPalette.tsx

@@ -2966,9 +2966,6 @@ function OpenCommandPaletteDialog(props: {
                 })
               : undefined,
         placeholder: inputPlaceholder,
-        wrapperClassName: isSubmenu
-          ? "[&_[data-slot=autocomplete-start-addon]]:pointer-events-auto"
-          : undefined,
         ...(isSubmenu
           ? {
               startAddon: (

apps/web/src/components/DiffPanel.tsx

@@ -775,7 +775,6 @@ export default function DiffPanel({
                 <ComboboxList className="max-h-64 min-w-0 overflow-x-hidden">
                   <ComboboxItem
                     className="w-full min-w-0 grid-cols-[1rem_minmax(0,1fr)]"
-                    contentClassName="w-full min-w-0 overflow-hidden"
                     value={AUTOMATIC_BASE_REF}
                   >
                     <span className="block min-w-0 truncate">Automatic</span>
@@ -788,7 +787,6 @@ export default function DiffPanel({
                       <ComboboxItem
                         key={choice.id}
                         className="w-full min-w-0 grid-cols-[1rem_minmax(0,1fr)]"
-                        contentClassName="w-full min-w-0 overflow-hidden"
                         value={item}
                       >
                         <div className="grid w-full min-w-0 grid-cols-[minmax(0,1fr)_2rem] items-center overflow-hidden">

apps/web/src/components/RightPanelSheet.tsx

@@ -1,16 +1,12 @@
 import { type ReactNode } from "react";
 
-import {
-  RIGHT_PANEL_SHEET_CLASS_NAME,
-  RIGHT_PANEL_SHEET_LAYER_CLASS_NAME,
-} from "../rightPanelLayout";
+import { RIGHT_PANEL_SHEET_CLASS_NAME } from "../rightPanelLayout";
 import { Sheet, SheetPopup } from "./ui/sheet";
 
 export function RightPanelSheet(props: {
   animationDurationMs: number;
   children: ReactNode;
   open: boolean;
-  underFloatingPreview?: boolean;
   onClose: () => void;
 }) {
   return (
@@ -27,12 +23,6 @@ export function RightPanelSheet(props: {
         side="right"
         showCloseButton={false}
         keepMounted
-        {...(props.underFloatingPreview
-          ? {
-              backdropClassName: RIGHT_PANEL_SHEET_LAYER_CLASS_NAME,
-              viewportClassName: RIGHT_PANEL_SHEET_LAYER_CLASS_NAME,
-            }
-          : {})}
         className={RIGHT_PANEL_SHEET_CLASS_NAME}
       >
         {props.children}

apps/web/src/components/Sidebar.tsx

@@ -235,7 +235,7 @@ import {
 import { SidebarContent, SidebarGroup, useSidebar } from "./ui/sidebar";
 import { SidebarChromeFooter, SidebarChromeHeader } from "./sidebar/SidebarChrome";
 import { SidebarHeaderIconButton, SidebarThreadHeader } from "./sidebar/SidebarThreadHeader";
-import { Popover, PopoverPopup, PopoverTrigger } from "./ui/popover";
+import { Menu, MenuItem, MenuPopup, MenuSeparator, MenuShortcut, MenuTrigger } from "./ui/menu";
 import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import { MiddleTruncate } from "./ui/middle-truncate";
 import {
@@ -440,7 +440,7 @@ function SidebarThreadTooltip({
  * Controlled by the row (which also uses the open state to pin its hover
  * actions while the menu is up).
  */
-function SnoozePopoverButton(props: {
+function SnoozeMenuButton(props: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSnooze: (preset: Pick<SnoozePreset, "snoozedUntil">) => void;
@@ -454,11 +454,11 @@ function SnoozePopoverButton(props: {
     [open, timestampFormat],
   );
   return (
-    <Popover open={open} onOpenChange={onOpenChange}>
+    <Menu open={open} onOpenChange={onOpenChange}>
       <Tooltip>
         <TooltipTrigger
           render={
-            <PopoverTrigger
+            <MenuTrigger
               render={
                 <button
                   type="button"
@@ -475,39 +475,31 @@ function SnoozePopoverButton(props: {
         </TooltipTrigger>
         <TooltipPopup>Snooze thread</TooltipPopup>
       </Tooltip>
-      <PopoverPopup side="bottom" align="end" width="sm" viewportClassName="p-1">
+      <MenuPopup side="bottom" align="end">
         {presets.map((preset) => (
-          <button
+          <MenuItem
             key={preset.id}
-            type="button"
             onClick={(event) => {
               event.stopPropagation();
-              onOpenChange(false);
               onSnooze(preset);
             }}
-            className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs text-foreground/90 hover:bg-accent hover:text-foreground"
           >
-            <span className="flex-1">{preset.label}</span>
-            <span className="font-mono text-[10px] text-muted-foreground/60 tabular-nums">
-              {preset.whenLabel}
-            </span>
-          </button>
+            {preset.label}
+            <MenuShortcut>{preset.whenLabel}</MenuShortcut>
+          </MenuItem>
         ))}
-        <div className="my-1 border-t border-border/60" />
-        <button
-          type="button"
-          className="flex w-full cursor-pointer rounded-md px-2 py-1.5 text-left text-xs text-foreground/90 hover:bg-accent hover:text-foreground"
+        <MenuSeparator />
+        <MenuItem
           onClick={async (event) => {
             event.stopPropagation();
-            onOpenChange(false);
             const choice = await requestCustomSnooze();
             if (choice) onSnooze(choice);
           }}
         >
           Custom…
-        </button>
-      </PopoverPopup>
-    </Popover>
+        </MenuItem>
+      </MenuPopup>
+    </Menu>
   );
 }
 
@@ -1883,7 +1875,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                         </Tooltip>
                       ) : null}
                       {showSnoozeButton ? (
-                        <SnoozePopoverButton
+                        <SnoozeMenuButton
                           open={snoozeMenuOpen}
                           onOpenChange={setSnoozeMenuOpen}
                           onSnooze={handleSnoozePreset}
@@ -4492,7 +4484,6 @@ export default function Sidebar() {
                             hideIndicator
                             value={item}
                             className="font-medium"
-                            contentClassName="flex min-w-0 items-center gap-2"
                             onContextMenu={(event) => {
                               if (project) handleProjectSettings(event, project);
                             }}

apps/web/src/components/chat/AssistantCitationChip.tsx

@@ -171,7 +171,7 @@ export function AssistantCitationChip({
               }}
               aria-label="Edit citation comment"
               width="md"
-              viewportClassName="p-3"
+              padding="compact"
               onPointerDown={(event) => event.stopPropagation()}
             >
               <AssistantCitationCommentEditor

apps/web/src/components/chat/ContextWindowMeter.tsx

@@ -88,7 +88,7 @@ export function ContextWindowMeter(props: {
         tooltipStyle
         side="top"
         align="end"
-        viewportClassName="p-0"
+        padding="none"
         width="sm"
         className="text-left whitespace-normal"
       >

apps/web/src/components/chat/ExpandedImageDialog.tsx

@@ -179,8 +179,6 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
         variant="media"
         showCloseButton={false}
         bottomStickOnMobile={false}
-        backdropClassName="z-[60]"
-        viewportClassName="z-[60] grid-rows-1 place-items-center px-4 py-6 [-webkit-app-region:no-drag]"
         className="row-start-1 max-h-[92vh] w-[92vw] max-w-[92vw] items-center overflow-visible [--media-width:92vw] [--media-height:min(86vh,calc(100vh-160px))] sm:[--media-width:calc(92vw-96px)]"
         onKeyDown={onKeyDown}
         initialFocus={closeButtonRef}

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -2567,7 +2567,7 @@ function BackgroundWorktreeSetupChip({ snapshot }: { snapshot: WorktreeSetupSnap
         align="end"
         width="lg"
         className="surface-glass!"
-        viewportClassName="py-3 [--viewport-inline-padding:--spacing(3)]"
+        padding="compact"
       >
         <WorktreeSetupCard
           snapshot={snapshot}

apps/web/src/components/chat/ModelListRow.tsx

@@ -52,7 +52,6 @@ export const ModelListRow = memo(function ModelListRow(props: {
       index={props.index}
       value={modelPickerModelKey(props.instanceId, props.model.slug)}
       disabled={Boolean(props.disabledReason)}
-      contentClassName="flex w-full items-center gap-3"
       className={cn(
         "group relative w-full !min-w-0 max-w-full cursor-pointer rounded-md px-2 py-2 transition-[background-color,box-shadow,color]",
         "hover:bg-[color-mix(in_srgb,var(--popover)_90%,var(--contrast-foreground))] data-highlighted:bg-[color-mix(in_srgb,var(--popover)_90%,var(--contrast-foreground))] data-selected:bg-foreground/[0.08] data-selected:text-foreground data-selected:ring-0 [&[data-highlighted][data-selected]]:bg-[color-mix(in_srgb,var(--popover)_90%,var(--contrast-foreground))]",