From f46522777372be1705e3b7a1ab08756f236db5d2 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 21:33:02 -0700
Subject: [PATCH] refactor(web): app code stops restyling sidebar, popover,
 table and misc ui exports (#13207)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/AppSidebarLayout.tsx  |   8 +-
 .../BranchToolbarBranchSelector.tsx           |   7 +-
 .../web/src/components/CustomSnoozeDialog.tsx |  12 +-
 apps/web/src/components/GitActionsControl.tsx | 112 +++---
 apps/web/src/components/LegacySidebar.tsx     |  18 +-
 .../components/PullRequestThreadDialog.tsx    |   4 +-
 apps/web/src/components/Sidebar.tsx           |  25 +-
 .../src/components/chat/ChangedFilesTree.tsx  |   7 +-
 .../src/components/chat/ComposerBanner.tsx    |  12 +-
 .../components/chat/ComposerBannerStack.tsx   |   2 +-
 .../src/components/chat/MessagesTimeline.tsx  |   8 +-
 .../chat/useAutoBalanceUpdateBanner.tsx       |   4 +-
 .../components/onboarding/WelcomeWizard.tsx   |   4 +-
 .../src/components/projectScriptEditor.tsx    |   2 +-
 .../pullRequest/PullRequestDetailPanel.tsx    |  10 +-
 .../pullRequest/PullRequestGhosts.tsx         |   6 +-
 .../pullRequest/PullRequestLinkPreview.tsx    |  62 +--
 .../PullRequestReviewAnnotation.tsx           |   2 +-
 .../pullRequest/PullRequestReviewerPicker.tsx |   2 +-
 .../pullRequest/PullRequestSummaryTab.tsx     |  49 +--
 .../pullRequest/pullRequestPresentation.tsx   |  48 ++-
 .../search/ProjectContentSearchDialog.tsx     |   7 +-
 .../settings/AddProviderInstanceDialog.tsx    |   2 +-
 .../settings/DiagnosticsSettings.tsx          | 312 +++++++--------
 .../settings/IntegrationsSettings.tsx         |  11 +-
 .../settings/ProviderAccentColorPicker.tsx    |   7 +-
 .../settings/ProviderSettingsPanel.tsx        |   2 +-
 .../settings/ResourceTelemetryDiagnostics.tsx | 364 +++++++++---------
 .../settings/SettingsScopeNotice.tsx          |   2 +-
 .../settings/SettingsSidebarNav.tsx           | 206 +++++-----
 .../components/settings/ThemeColorPicker.tsx  |   4 +-
 .../components/settings/ThemeEditorPanel.tsx  |   6 +-
 .../src/components/sidebar/SidebarChrome.tsx  |  14 +-
 .../sidebar/SidebarThreadHeader.tsx           |   5 +-
 .../components/sidebar/SidebarUpdatePill.tsx  |   1 -
 .../sidebar/SidebarUpdateReleaseNotes.tsx     |   4 +-
 apps/web/src/components/ui/toggle.tsx         |   2 +-
 .../components/usage/UsageLimitsPooled.tsx    |   3 +-
 .../components/usage/UsagePriceOverrides.tsx  |  39 +-
 apps/web/src/routes/_chat.pull-requests.tsx   |   2 +-
 scripts/lint-restyle-ceiling.ts               |   2 +-
 41 files changed, 686 insertions(+), 713 deletions(-)

diff --git a/apps/web/src/components/AppSidebarLayout.tsx b/apps/web/src/components/AppSidebarLayout.tsx
index 14d871c41804fc642194dbc6b5774baf6aa4824c..1b67af90ef3cdd09114c338ad20bb1d66ad0a9af 100644
--- a/apps/web/src/components/AppSidebarLayout.tsx
+++ b/apps/web/src/components/AppSidebarLayout.tsx
@@ -125,11 +125,12 @@ function SidebarControl() {
         <TooltipTrigger
           render={
             <SidebarTrigger
+              // Over the stage artwork the trigger is a control on imagery, like the media
+              // viewer's arrows; that variant positions itself, so the layout is reset here.
+              variant={isSidebarVisible && stageBackdropVariant ? "media-navigation" : "ghost"}
               className={cn(
                 "pointer-events-auto",
-                isSidebarVisible &&
-                  stageBackdropVariant &&
-                  "focus-visible:ring-white/90 [&_svg]:stroke-white/90! [&_svg]:opacity-100! [&_svg]:hover:stroke-white! [:hover,[data-pressed]]:bg-white/15",
+                isSidebarVisible && stageBackdropVariant && "relative top-auto translate-y-0",
                 isSidebarVisible &&
                   stageBackdropVariant &&
                   resolveSidebarStageFocusRingOffsetClass(stageBackdropVariant),
@@ -244,7 +245,6 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
           side="left"
           collapsible="offcanvas"
           data-app-sidebar=""
-          className="border-r border-sidebar-border"
           resizable={{
             maxWidth: sidebarMaximumWidth,
             minWidth: THREAD_SIDEBAR_MIN_WIDTH,
diff --git a/apps/web/src/components/BranchToolbarBranchSelector.tsx b/apps/web/src/components/BranchToolbarBranchSelector.tsx
index b0596811f664163e3be5d39ac11da39e71bf54f8..a548d414bcc8c0d9f5417a119f46715e3d25d603 100644
--- a/apps/web/src/components/BranchToolbarBranchSelector.tsx
+++ b/apps/web/src/components/BranchToolbarBranchSelector.tsx
@@ -817,11 +817,12 @@ export function BranchToolbarBranchSelector({
               data-composer-label
               className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
             >
-              <MiddleTruncate
-                value={triggerLabel}
+              <span
                 data-composer-label-motion
                 className="flex w-full max-w-[240px] transition-opacity duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transition-none"
-              />
+              >
+                <MiddleTruncate value={triggerLabel} />
+              </span>
             </span>
             <ChevronDownIcon className="size-3 shrink-0 opacity-50" />
           </ComboboxTrigger>
diff --git a/apps/web/src/components/CustomSnoozeDialog.tsx b/apps/web/src/components/CustomSnoozeDialog.tsx
index 4cd3be8a096e3165fb1ffd10e3dcc9b464aef9b1..ca7ff81c80ab462ccd855a13b7e8b3595612d31c 100644
--- a/apps/web/src/components/CustomSnoozeDialog.tsx
+++ b/apps/web/src/components/CustomSnoozeDialog.tsx
@@ -93,7 +93,7 @@ function CustomSnoozeDialog() {
             <DialogTitle>Custom snooze</DialogTitle>
             <DialogDescription>Choose when snoozed threads return to your inbox.</DialogDescription>
           </DialogHeader>
-          <DialogPanel className="text-base sm:text-sm">
+          <DialogPanel>
             <div className="flex flex-col gap-4">
               <ToggleGroup
                 aria-label="Schedule type"
@@ -147,10 +147,7 @@ function CustomSnoozeDialog() {
                         </PopoverPopup>
                       </Popover>
                     </div>
-                    <Label
-                      className="flex min-w-0 flex-col items-stretch gap-1.5"
-                      htmlFor={`${id}-time`}
-                    >
+                    <Label className="flex min-w-0 flex-col items-stretch" htmlFor={`${id}-time`}>
                       Time
                       <Input
                         nativeInput
@@ -185,10 +182,7 @@ function CustomSnoozeDialog() {
                         <NumberFieldIncrement aria-label="Increase duration" />
                       </NumberFieldGroup>
                     </NumberField>
-                    <Label
-                      className="flex min-w-0 flex-col items-stretch gap-1.5"
-                      htmlFor={`${id}-unit`}
-                    >
+                    <Label className="flex min-w-0 flex-col items-stretch" htmlFor={`${id}-unit`}>
                       Unit
                       <Select
                         value={unit}
diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx
index 41ae826dce98ebe50b22445c2aad8d68283fb22f..776c492fdfec4ac2300f533e387c1d9633a50111 100644
--- a/apps/web/src/components/GitActionsControl.tsx
+++ b/apps/web/src/components/GitActionsControl.tsx
@@ -627,7 +627,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
                 setPublishRepositoryOverride(null);
               }}
               aria-labelledby="publish-provider-cards-label"
-              className="grid grid-cols-2 gap-2.5"
+              className="grid grid-cols-2"
             >
               {sortedPublishProviderOptions.map((option) => {
                 const readiness = publishProviderReadiness[option.value];
@@ -737,7 +737,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
                 }
                 aria-labelledby="publish-visibility-cards-label"
                 disabled={publishRepositoryAction.isPending}
-                className="grid grid-cols-2 gap-2.5"
+                className="grid grid-cols-2"
               >
                 {[
                   {
@@ -1915,57 +1915,63 @@ export default function GitActionsControl({
                   <p className="font-medium">none</p>
                 ) : (
                   <div className="space-y-2">
-                    <ScrollArea className="h-44 rounded-lg bg-card ring-1 ring-black/5 dark:bg-white/[0.025] dark:ring-white/5">
-                      <div className="space-y-1 p-1">
-                        {allFiles.map((file) => {
-                          const isExcluded = excludedFiles.has(file.path);
-                          return (
-                            <div
-                              key={file.path}
-                              className="flex w-full items-center gap-2 rounded-md px-2 py-1 font-mono hover:bg-accent/50"
-                            >
-                              {isEditingFiles && (
-                                <Checkbox
-                                  checked={!excludedFiles.has(file.path)}
-                                  onCheckedChange={() => {
-                                    setExcludedFiles((prev) => {
-                                      const next = new Set(prev);
-                                      if (next.has(file.path)) {
-                                        next.delete(file.path);
-                                      } else {
-                                        next.add(file.path);
-                                      }
-                                      return next;
-                                    });
-                                  }}
-                                />
-                              )}
-                              <button
-                                type="button"
-                                className="flex min-w-0 flex-1 items-center justify-between gap-3 text-left"
-                                onClick={() => openChangedFileInEditor(file.path)}
+                    <div className="h-44 rounded-lg bg-card ring-1 ring-black/5 dark:bg-white/[0.025] dark:ring-white/5">
+                      <ScrollArea>
+                        <div className="space-y-1 p-1">
+                          {allFiles.map((file) => {
+                            const isExcluded = excludedFiles.has(file.path);
+                            return (
+                              <div
+                                key={file.path}
+                                className="flex w-full items-center gap-2 rounded-md px-2 py-1 font-mono hover:bg-accent/50"
                               >
-                                <StartTruncatedPath
-                                  path={file.path}
-                                  className={`flex-1${isExcluded ? " text-muted-foreground" : ""}`}
-                                />
-                                <span className="shrink-0">
-                                  {isExcluded ? (
-                                    <span className="text-muted-foreground">Excluded</span>
-                                  ) : (
-                                    <>
-                                      <span className="text-diff-addition">+{file.insertions}</span>
-                                      <span className="text-muted-foreground"> / </span>
-                                      <span className="text-diff-deletion">-{file.deletions}</span>
-                                    </>
-                                  )}
-                                </span>
-                              </button>
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </ScrollArea>
+                                {isEditingFiles && (
+                                  <Checkbox
+                                    checked={!excludedFiles.has(file.path)}
+                                    onCheckedChange={() => {
+                                      setExcludedFiles((prev) => {
+                                        const next = new Set(prev);
+                                        if (next.has(file.path)) {
+                                          next.delete(file.path);
+                                        } else {
+                                          next.add(file.path);
+                                        }
+                                        return next;
+                                      });
+                                    }}
+                                  />
+                                )}
+                                <button
+                                  type="button"
+                                  className="flex min-w-0 flex-1 items-center justify-between gap-3 text-left"
+                                  onClick={() => openChangedFileInEditor(file.path)}
+                                >
+                                  <StartTruncatedPath
+                                    path={file.path}
+                                    className={`flex-1${isExcluded ? " text-muted-foreground" : ""}`}
+                                  />
+                                  <span className="shrink-0">
+                                    {isExcluded ? (
+                                      <span className="text-muted-foreground">Excluded</span>
+                                    ) : (
+                                      <>
+                                        <span className="text-diff-addition">
+                                          +{file.insertions}
+                                        </span>
+                                        <span className="text-muted-foreground"> / </span>
+                                        <span className="text-diff-deletion">
+                                          -{file.deletions}
+                                        </span>
+                                      </>
+                                    )}
+                                  </span>
+                                </button>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </ScrollArea>
+                    </div>
                     <div className="flex justify-end font-mono">
                       <span className="text-diff-addition">
                         +{selectedFiles.reduce((sum, f) => sum + f.insertions, 0)}
@@ -2040,7 +2046,7 @@ export default function GitActionsControl({
             </DialogTitle>
             <DialogDescription>{pendingDefaultBranchActionCopy?.description}</DialogDescription>
           </DialogHeader>
-          <DialogFooter className="dark:border-transparent dark:bg-transparent sm:flex-wrap sm:items-center">
+          <DialogFooter variant="bare" className="sm:flex-wrap sm:items-center">
             <Button
               className="w-full sm:mr-auto sm:w-auto"
               variant="outline"
diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index 2373ed90cf6ae52b01ac9afbaab565a30ece5565..075ccea0a1c5f55a5295265eb4b309de2815e6a9 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -1038,7 +1038,7 @@ const SidebarProjectThreadList = memo(function SidebarProjectThreadList(
   return (
     <SidebarMenuSub
       ref={attachThreadListAutoAnimateRef}
-      className="mx-0.5 my-0 w-full translate-x-0 gap-0.5 overflow-hidden border-l-0 px-1 py-0 sm:mx-1 sm:px-1.5"
+      className="mx-0.5 my-0 w-full translate-x-0 overflow-hidden sm:mx-1"
     >
       {shouldShowThreadPanel && showEmptyThreadState ? (
         <SidebarMenuSubItem className="w-full" data-thread-selection-safe>
@@ -2357,9 +2357,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
       <div className="group/project-header relative">
         <SidebarMenuButton
           ref={isManualProjectSorting ? dragHandleProps?.setActivatorNodeRef : undefined}
-          className={`pr-8 group-hover/project-header:bg-sidebar-row-hover group-hover/project-header:text-sidebar-foreground max-sm:pr-14 ${
-            isManualProjectSorting ? "cursor-grab active:cursor-grabbing" : ""
-          }`}
+          className={isManualProjectSorting ? "cursor-grab active:cursor-grabbing" : undefined}
           {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.attributes : {})}
           {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.listeners : {})}
           onPointerDownCapture={handleProjectButtonPointerDownCapture}
@@ -2408,6 +2406,9 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
               </span>
             ) : null}
           </span>
+          {/* Keeps the name clear of the environment badge and new-thread button overlaid on
+              the row's end (two slots on touch, where both stay visible). */}
+          <span aria-hidden className="w-4 shrink-0 max-sm:w-10" />
         </SidebarMenuButton>
         {/* Environment badge – visible by default, crossfades with the
             "new thread" button on hover using the same pointer-events +
@@ -2618,7 +2619,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
 
 const SidebarProjectListRow = memo(function SidebarProjectListRow(props: SidebarProjectItemProps) {
   return (
-    <SidebarMenuItem className="rounded-md">
+    <SidebarMenuItem>
       <SidebarProjectItem {...props} />
     </SidebarMenuItem>
   );
@@ -2963,12 +2964,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
           <SidebarMenu>
             <SidebarMenuItem>
               <CommandDialogTrigger
-                render={
-                  <SidebarMenuButton
-                    className="focus-visible:ring-0"
-                    data-testid="command-palette-trigger"
-                  />
-                }
+                render={<SidebarMenuButton data-testid="command-palette-trigger" />}
               >
                 <SearchIcon />
                 <span className="flex-1 truncate">Search</span>
diff --git a/apps/web/src/components/PullRequestThreadDialog.tsx b/apps/web/src/components/PullRequestThreadDialog.tsx
index 1b4a73dcffd4d29a5b8f7cd81dab7b87404a7744..a2adddf296c8d9f3a2d51b068bfb9c38e4c7f864 100644
--- a/apps/web/src/components/PullRequestThreadDialog.tsx
+++ b/apps/web/src/components/PullRequestThreadDialog.tsx
@@ -196,8 +196,8 @@ export function PullRequestThreadDialog({
     >
       <DialogPopup className="max-w-xl">
         <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <SourceControlIcon className="size-4" />
+          <DialogTitle className="flex items-center">
+            <SourceControlIcon className="me-2 size-4" />
             Checkout {terminology.singular}
           </DialogTitle>
           <DialogDescription>
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 1df381470e8d532baced9f2d5206ed2515b3f895..70183831cc918f09dc856ee7533c3542892c0161 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -345,14 +345,9 @@ function SidebarThreadTooltip({
   const driverKind = providerEntry?.driverKind ?? null;
   const supportsMultiplePullRequests = useSupportsMultiplePullRequests(thread.environmentId);
   return (
-    <TooltipPopup
-      side="right"
-      align="start"
-      sideOffset={4}
-      variant="glass"
-      className="[&_[data-slot=tooltip-viewport]]:p-0"
-    >
-      <div className="flex min-w-0 max-w-80 flex-col gap-2 p-[var(--floating-content-inset)]">
+    <TooltipPopup side="right" align="start" sideOffset={4} variant="glass">
+      {/* The viewport's own inset (py-1 px-2) plus this one make the floating inset. */}
+      <div className="flex min-w-0 max-w-80 flex-col gap-2 px-1 py-2">
         <div className="min-w-0 truncate text-xs leading-tight font-medium text-foreground">
           {thread.title}
         </div>
@@ -373,9 +368,9 @@ function SidebarThreadTooltip({
             </div>
           ) : null}
           {thread.branch ? (
-            <div className="flex min-w-0 items-center gap-2">
+            <div className="flex min-w-0 items-center gap-2 text-foreground/75">
               <GitBranchIcon className="size-3 shrink-0 stroke-muted-foreground" />
-              <MiddleTruncate value={thread.branch} className="flex text-foreground/75" />
+              <MiddleTruncate value={thread.branch} className="flex" />
             </div>
           ) : null}
           {branchMismatch ? (
@@ -1920,11 +1915,9 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
               {thread.branch ? (
                 <>
                   <ThreadWorktreeIndicator thread={thread} />
-                  <MiddleTruncate
-                    value={thread.branch}
-                    showTitle={false}
-                    className="flex-1 text-muted-foreground/40"
-                  />
+                  <span className="flex min-w-0 flex-1 text-muted-foreground/40">
+                    <MiddleTruncate value={thread.branch} showTitle={false} />
+                  </span>
                 </>
               ) : (
                 <span className="flex-1" />
@@ -4544,7 +4537,7 @@ export default function Sidebar() {
           </SidebarGroup>
         }
       >
-        <SidebarGroup className="flex-1 ps-[calc(var(--sidebar-content-inset)+1px)]">
+        <SidebarGroup className="flex-1">
           {isSearchingThreads ? (
             threadSearchResults.length > 0 ? (
               <TooltipProvider
diff --git a/apps/web/src/components/chat/ChangedFilesTree.tsx b/apps/web/src/components/chat/ChangedFilesTree.tsx
index 02155ac7c72ca5c387bd6d8d4ac8405e03503762..db3615093cb03560144120000ba66658a0531da8 100644
--- a/apps/web/src/components/chat/ChangedFilesTree.tsx
+++ b/apps/web/src/components/chat/ChangedFilesTree.tsx
@@ -247,10 +247,9 @@ export const ChangedFilesTree = memo(function ChangedFilesTree(props: {
           theme={resolvedTheme}
           className="size-3.5 text-muted-foreground/70"
         />
-        <MiddleTruncate
-          value={node.name}
-          className="font-mono text-xs text-foreground/85 group-hover:text-foreground"
-        />
+        <span className="flex min-w-0 font-mono text-xs text-foreground/85 group-hover:text-foreground">
+          <MiddleTruncate value={node.name} />
+        </span>
         {node.stat && (
           <span className="ml-auto shrink-0 font-mono text-[10px] tabular-nums">
             <DiffStatLabel additions={node.stat.additions} deletions={node.stat.deletions} />
diff --git a/apps/web/src/components/chat/ComposerBanner.tsx b/apps/web/src/components/chat/ComposerBanner.tsx
index 4e52dfa51b69c2ae380fd9afe24b8650a64279ae..384ca66a9096c0d9cbf63a250849dcdc89afa759 100644
--- a/apps/web/src/components/chat/ComposerBanner.tsx
+++ b/apps/web/src/components/chat/ComposerBanner.tsx
@@ -279,17 +279,17 @@ function Children({ className, render, ...props }: useRender.ComponentProps<"div
 }
 
 /** Bounded banner content uses the app's scroll area and fades only overflowing edges. */
-function Scroll({ className, ...props }: ComponentProps<typeof ScrollArea>) {
+function Scroll({ className, children, ...props }: ComponentProps<typeof ScrollArea>) {
   return (
     <ScrollArea
       radius="none"
       scrollFade
-      className={cn(
-        "h-auto max-h-[min(24rem,40dvh)] [&>[data-slot=scroll-area-viewport][data-has-overflow-y]]:pe-2",
-        className,
-      )}
+      className={cn("h-auto max-h-[min(24rem,40dvh)]", className)}
       {...props}
-    />
+    >
+      {/* Clears the overlay scrollbar only once there is something to scroll. */}
+      <div className="[[data-has-overflow-y]>&]:pe-2">{children}</div>
+    </ScrollArea>
   );
 }
 
diff --git a/apps/web/src/components/chat/ComposerBannerStack.tsx b/apps/web/src/components/chat/ComposerBannerStack.tsx
index ec4b442593211ce2f22eb685df84bb479cf1190e..a55385fd4aa16282feb0ca9be1665fda17e7e152 100644
--- a/apps/web/src/components/chat/ComposerBannerStack.tsx
+++ b/apps/web/src/components/chat/ComposerBannerStack.tsx
@@ -306,7 +306,7 @@ function NoticeDescription({ children, compact }: { children: ReactNode; compact
             aria-label="Notice details"
             tooltipStyle
             side="top"
-            className="max-w-80 whitespace-normal text-pretty wrap-anywhere"
+            className="max-w-80 whitespace-normal wrap-anywhere"
           >
             <ComposerBanner.Scroll className="max-h-[min(var(--available-height),24rem,40dvh)]">
               {children}
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 0d31429fe994f7767db02f9f3eaf01a8a7a5b4c2..d5bef349264cfc2ded15316045191ddddddb3622 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -2562,13 +2562,7 @@ function BackgroundWorktreeSetupChip({ snapshot }: { snapshot: WorktreeSetupSnap
         <Spinner size="xs" className="shrink-0" />
         <span className="truncate">{scriptName}</span>
       </PopoverTrigger>
-      <PopoverPopup
-        side="bottom"
-        align="end"
-        width="lg"
-        className="surface-glass!"
-        padding="compact"
-      >
+      <PopoverPopup side="bottom" align="end" width="lg" padding="compact">
         <WorktreeSetupCard
           snapshot={snapshot}
           embedded
diff --git a/apps/web/src/components/chat/useAutoBalanceUpdateBanner.tsx b/apps/web/src/components/chat/useAutoBalanceUpdateBanner.tsx
index 8675982af5dc33a2e4afa89f400387a9307cf6e0..9784f22b78012734ea1531c1b168943623ebdb25 100644
--- a/apps/web/src/components/chat/useAutoBalanceUpdateBanner.tsx
+++ b/apps/web/src/components/chat/useAutoBalanceUpdateBanner.tsx
@@ -97,10 +97,10 @@ export function useAutoBalanceUpdateBanner(
       <Popover>
         <PopoverTrigger
           render={<InlineButton />}
-          className="block max-w-full truncate"
+          className="max-w-full"
           aria-label={`${title}. View machines`}
         >
-          {title}
+          <span className="min-w-0 truncate">{title}</span>
         </PopoverTrigger>
         <PopoverPopup side="top" align="start" width="md">
           <div className="space-y-3 text-xs">
diff --git a/apps/web/src/components/onboarding/WelcomeWizard.tsx b/apps/web/src/components/onboarding/WelcomeWizard.tsx
index 846ebf8898057611a544199231b5f20b3d3967ad..100869f25369711ee2acdeba183c3a0cb06a9ffe 100644
--- a/apps/web/src/components/onboarding/WelcomeWizard.tsx
+++ b/apps/web/src/components/onboarding/WelcomeWizard.tsx
@@ -584,8 +584,8 @@ function PairingForm({
               {isPairing ? "Pairing..." : "Pair"}
             </Button>
           </div>
-          <CollapsiblePanel className="pt-3">
-            <p className="text-sm text-muted-foreground">
+          <CollapsiblePanel>
+            <p className="pt-3 text-sm text-muted-foreground">
               Run this on the computer with your code.
             </p>
             <CommandBlock command="npx t3 pair" className="mt-2" />
diff --git a/apps/web/src/components/projectScriptEditor.tsx b/apps/web/src/components/projectScriptEditor.tsx
index 774398feda063db81b55e22487f29e627a248799..0778fb0da531f5aa45ccfdcb9bf4baf60aa28be2 100644
--- a/apps/web/src/components/projectScriptEditor.tsx
+++ b/apps/web/src/components/projectScriptEditor.tsx
@@ -431,7 +431,7 @@ export function ProjectScriptEditorDialog({
               </fieldset>
             </form>
           </DialogPanel>
-          <DialogFooter className="dark:border-transparent dark:bg-transparent">
+          <DialogFooter variant="bare">
             {isEditing && (
               <Button
                 type="button"
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index 5d3efe70723fe606018144df81849ab4a0c83ee2..ee7351974bc13a07ef902b3ddf66ad7fb61d03c0 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -2252,8 +2252,8 @@ export function PullRequestDetailPanel({
                     <PullRequestActorLabel
                       actor={detail.author}
                       profileUrl={authorProfileUrl}
-                      className="shrink-0 rounded-full"
-                      labelClassName="sr-only"
+                      variant="avatar"
+                      className="shrink-0"
                     />
                     <span className="shrink-0">{formatRelativeTimeLabel(detail.updatedAt)}</span>
                   </span>
@@ -2428,11 +2428,7 @@ export function PullRequestDetailPanel({
                 )}
                 <div className="mt-2 flex min-h-5 min-w-0 items-center gap-2 text-xs text-muted-foreground">
                   <PullRequestMetaLine className="min-w-0 whitespace-nowrap">
-                    <PullRequestActorLabel
-                      actor={detail.author}
-                      profileUrl={authorProfileUrl}
-                      className="font-medium"
-                    />
+                    <PullRequestActorLabel actor={detail.author} profileUrl={authorProfileUrl} />
                     <span>updated {formatRelativeTimeLabel(detail.updatedAt)}</span>
                   </PullRequestMetaLine>
                   {checkoutCommand ? (
diff --git a/apps/web/src/components/pullRequest/PullRequestGhosts.tsx b/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
index 00190c6d29dd8d55da3815a3ab768481f03f739d..78d93915e0dd4859193ebc44bd11edefdf383f92 100644
--- a/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
@@ -216,11 +216,7 @@ export function PullRequestDetailGhost({
               <div className="mt-2 flex min-h-5 min-w-0 items-center gap-2 text-xs text-muted-foreground">
                 {seed ? (
                   <PullRequestMetaLine className="min-w-0 whitespace-nowrap">
-                    <PullRequestActorLabel
-                      actor={seed.author ?? null}
-                      className="font-medium"
-                      tooltip={false}
-                    />
+                    <PullRequestActorLabel actor={seed.author ?? null} tooltip={false} />
                     <span>updated {formatRelativeTimeLabel(seed.updatedAt)}</span>
                   </PullRequestMetaLine>
                 ) : (
diff --git a/apps/web/src/components/pullRequest/PullRequestLinkPreview.tsx b/apps/web/src/components/pullRequest/PullRequestLinkPreview.tsx
index 1ed759eaa80e07a9f4095ae467b1a7f5e0515fd8..c5a60eecfde40b51fda0e32d6b0d45e2bf831e80 100644
--- a/apps/web/src/components/pullRequest/PullRequestLinkPreview.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestLinkPreview.tsx
@@ -96,37 +96,41 @@ export function PullRequestLinkPreview({
     <PreviewCard open={open} onOpenChange={setOpen}>
       <PreviewCardTrigger render={trigger} delay={350} closeDelay={120} />
       {detail !== null || detailQuery.error !== null ? (
-        <PreviewCardPopup align="center" className="w-80 max-w-[calc(100vw-2rem)] p-3">
-          {detail === null ? (
-            (fallback ?? (
-              <p className="text-xs leading-relaxed text-muted-foreground wrap-anywhere">
-                {originalUrl}
-              </p>
-            ))
-          ) : (
-            <div className="min-w-0">
-              <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
-                <span className="min-w-0 truncate">{detail.repository}</span>
-                <span className="shrink-0">#{detail.number}</span>
-                <span aria-hidden>·</span>
-                {state === null ? null : (
-                  <span className="inline-flex shrink-0 items-center gap-1">
-                    <state.Icon aria-hidden className={`size-3 ${state.toneClassName}`} />
-                    {state.label}
+        <PreviewCardPopup align="center" className="w-80 max-w-[calc(100vw-2rem)]">
+          <div className="p-3">
+            {detail === null ? (
+              (fallback ?? (
+                <p className="text-xs leading-relaxed text-muted-foreground wrap-anywhere">
+                  {originalUrl}
+                </p>
+              ))
+            ) : (
+              <div className="min-w-0">
+                <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
+                  <span className="min-w-0 truncate">{detail.repository}</span>
+                  <span className="shrink-0">#{detail.number}</span>
+                  <span aria-hidden>·</span>
+                  {state === null ? null : (
+                    <span className="inline-flex shrink-0 items-center gap-1">
+                      <state.Icon aria-hidden className={`size-3 ${state.toneClassName}`} />
+                      {state.label}
+                    </span>
+                  )}
+                </div>
+                <p className="mt-1 text-sm font-medium leading-snug text-foreground text-pretty">
+                  {detail.title}
+                </p>
+                <div className="mt-2 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+                  <PullRequestActorAvatar actor={detail.author} className="size-4" />
+                  <span className="min-w-0 truncate">{authorLabel}</span>
+                  <span aria-hidden>·</span>
+                  <span className="shrink-0">
+                    opened {formatRelativeTimeLabel(detail.createdAt)}
                   </span>
-                )}
+                </div>
               </div>
-              <p className="mt-1 text-sm font-medium leading-snug text-foreground text-pretty">
-                {detail.title}
-              </p>
-              <div className="mt-2 flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
-                <PullRequestActorAvatar actor={detail.author} className="size-4" />
-                <span className="min-w-0 truncate">{authorLabel}</span>
-                <span aria-hidden>·</span>
-                <span className="shrink-0">opened {formatRelativeTimeLabel(detail.createdAt)}</span>
-              </div>
-            </div>
-          )}
+            )}
+          </div>
         </PreviewCardPopup>
       ) : null}
     </PreviewCard>
diff --git a/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx b/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx
index d49cb52cc3f2d5427a15042d6e121bb3c2ebbd39..54f4860b95338a13d13b11b889aa502d9840d2a4 100644
--- a/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx
@@ -265,7 +265,7 @@ export function ReviewThreadCard({
             {comments.map((comment) => (
               <article key={comment.id} className="group min-w-0">
                 <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                  <PullRequestActorLabel actor={comment.author} className="text-foreground" />
+                  <PullRequestActorLabel actor={comment.author} />
                   <span>{formatRelativeTimeLabel(comment.createdAt)}</span>
                   <PullRequestReactionBar
                     className="ml-auto justify-end"
diff --git a/apps/web/src/components/pullRequest/PullRequestReviewerPicker.tsx b/apps/web/src/components/pullRequest/PullRequestReviewerPicker.tsx
index ac4c83ad714efbc6f7bcc314ed4d74b2fdeb8b38..aeefa28a9c50eab7d9084905cf969085166b75b6 100644
--- a/apps/web/src/components/pullRequest/PullRequestReviewerPicker.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestReviewerPicker.tsx
@@ -120,7 +120,7 @@ export function PullRequestReviewerPicker({
     >
       {(candidate) => (
         <>
-          <PullRequestActorLabel actor={candidate} className="min-w-0 flex-1 truncate" />
+          <PullRequestActorLabel actor={candidate} className="flex-1" />
           {candidate.kind === "team" ? (
             <span className="shrink-0 text-muted-foreground">team</span>
           ) : null}
diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
index d5478e300eb0eca180dab9773636ceaab5daa2e7..c4f3102011829f66acdd180eb9109a1896c97cd7 100644
--- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
@@ -78,11 +78,7 @@ function CommentIdentity({
       : null;
   return (
     <div className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1 text-xs">
-      <PullRequestActorLabel
-        actor={actor}
-        profileUrl={profileUrl}
-        className="max-w-full font-medium text-foreground [&>img]:size-6 [&>span:first-child]:size-6"
-      />
+      <PullRequestActorLabel actor={actor} profileUrl={profileUrl} className="max-w-full" />
       <Tooltip>
         <TooltipTrigger
           render={
@@ -383,22 +379,26 @@ function CommentGroup({
         <div className="flex items-center gap-3 pl-3">
           <div className="flex shrink-0 -space-x-1.5">
             {authors.slice(0, 3).map((actor) => (
-              <PullRequestActorLabel
+              // The ring separates the overlapping faces; it belongs to the stack, not the actor.
+              <span
                 key={actor?.login ?? "ghost"}
-                actor={actor}
-                profileUrl={
-                  detail.provider === "github" && actor
-                    ? new URL(
-                        actor.isBot || actor.login.endsWith("[bot]")
-                          ? `/apps/${encodeURIComponent(actor.login.replace(/\[bot\]$/, ""))}`
-                          : `/${encodeURIComponent(actor.login)}`,
-                        detail.url,
-                      ).toString()
-                    : null
-                }
-                labelClassName="sr-only"
-                className="relative rounded-full bg-background ring-2 ring-background hover:z-10 focus-visible:z-10 [&>img]:size-6 [&>span:first-child]:size-6"
-              />
+                className="relative flex rounded-full ring-2 ring-background hover:z-10 focus-within:z-10"
+              >
+                <PullRequestActorLabel
+                  actor={actor}
+                  profileUrl={
+                    detail.provider === "github" && actor
+                      ? new URL(
+                          actor.isBot || actor.login.endsWith("[bot]")
+                            ? `/apps/${encodeURIComponent(actor.login.replace(/\[bot\]$/, ""))}`
+                            : `/${encodeURIComponent(actor.login)}`,
+                          detail.url,
+                        ).toString()
+                      : null
+                  }
+                  variant="avatar"
+                />
+              </span>
             ))}
             {authors.length > 3 ? (
               <span className="relative flex size-6 items-center justify-center rounded-full bg-muted text-[10px] text-muted-foreground ring-2 ring-background">
@@ -752,14 +752,7 @@ export function PullRequestSummaryTab({
                           <PullRequestActorLabel
                             actor={entry.actor}
                             tooltip={false}
-                            className={cn(
-                              "gap-0 [&>span:last-child]:sr-only",
-                              // Only where the wrapper is not already drawing one, or the opaque
-                              // separator would cover the verdict in the band they share.
-                              entry.outcome
-                                ? undefined
-                                : "[&>img]:ring-2 [&>img]:ring-background [&>span:first-child]:ring-2 [&>span:first-child]:ring-background",
-                            )}
+                            variant="avatar"
                           />
                           {/* Colour alone says nothing to a reader who cannot see it, and the
                               login beside this is already in the accessible name. */}
diff --git a/apps/web/src/components/pullRequest/pullRequestPresentation.tsx b/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
index 6c3506a9321a449100bcb1f2b3dda35ca14f0b13..7b8ca6ca69ff81846bd9763647076bfa39a41bd7 100644
--- a/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
+++ b/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
@@ -23,6 +23,7 @@ import { Children, type CSSProperties, isValidElement, type ReactNode, useState
 import { cn } from "~/lib/utils";
 
 import { Badge } from "../ui/badge";
+import { InlineButton } from "../ui/button";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import type { PullRequestReviewOutcome } from "./pullRequestDetail.logic";
 import { pullRequestLabelColor } from "./pullRequestList.logic";
@@ -445,51 +446,56 @@ export function PullRequestActorAvatar({
   );
 }
 
-/** GitHub attributes work from a deleted account to "ghost"; say the same word everywhere. */
+/**
+ * GitHub attributes work from a deleted account to "ghost"; say the same word everywhere.
+ *
+ * An actor as a login beside its avatar, or as the avatar alone. With a profile URL the actor
+ * is an inline link; `className` places it and never restyles it.
+ */
 export function PullRequestActorLabel({
   actor,
   className,
-  labelClassName,
+  variant = "label",
   tooltip = true,
   profileUrl,
 }: {
   actor: PullRequestActor | null;
   className?: string;
-  labelClassName?: string;
+  variant?: "label" | "avatar";
   tooltip?: boolean;
   profileUrl?: string | null;
 }) {
   const login = actor?.login ?? "ghost";
   const label = (
-    <>
+    <span className={cn("flex min-w-0 items-center", variant === "label" && "gap-1.5")}>
       <PullRequestActorAvatar actor={actor} />
-      <span className={cn("truncate", labelClassName)}>{login}</span>
-    </>
+      <span className={variant === "label" ? "truncate font-medium text-foreground" : "sr-only"}>
+        {login}
+      </span>
+    </span>
   );
-  if (!tooltip) {
-    return <span className={cn("flex min-w-0 items-center gap-1.5", className)}>{label}</span>;
-  }
+  const placement = cn("flex min-w-0 shrink", className);
+  if (!tooltip) return <span className={placement}>{label}</span>;
   return (
     <Tooltip>
       <TooltipTrigger
         render={
           profileUrl ? (
-            <a
-              href={profileUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label={`Open ${login}'s profile`}
+            <InlineButton
+              className={placement}
+              render={
+                <a
+                  href={profileUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`Open ${login}'s profile`}
+                />
+              }
             />
           ) : (
-            <span />
+            <span className={placement} />
           )
         }
-        className={cn(
-          "flex min-w-0 items-center gap-1.5",
-          profileUrl &&
-            "cursor-pointer rounded-sm underline-offset-2 outline-none hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-          className,
-        )}
       >
         {label}
       </TooltipTrigger>
diff --git a/apps/web/src/components/search/ProjectContentSearchDialog.tsx b/apps/web/src/components/search/ProjectContentSearchDialog.tsx
index 3c83c1f371542e36e6bb09f33e2bc6ee5048e923..e037dd0ee9c8fd2c02710af636320d8aff20e85f 100644
--- a/apps/web/src/components/search/ProjectContentSearchDialog.tsx
+++ b/apps/web/src/components/search/ProjectContentSearchDialog.tsx
@@ -67,14 +67,13 @@ function SearchOptionButton(props: {
           <Toggle
             aria-label={props.label}
             pressed={props.active}
-            className="size-8 rounded-[5px] font-mono text-muted-foreground data-pressed:text-foreground sm:size-7"
-            size="compact"
-            variant="ghost"
+            size="segmented"
+            variant="segmented"
             onClick={props.onClick}
           />
         }
       >
-        {props.children}
+        <span className="font-mono">{props.children}</span>
       </TooltipTrigger>
       <TooltipPopup side="top">{props.label}</TooltipPopup>
     </Tooltip>
diff --git a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
index 0e92071e1161497e6e9148a0c46d8b44106d0e09..f912f5f68d652e0fde6d33dad28762bdb8fbb41c 100644
--- a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
+++ b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
@@ -251,7 +251,7 @@ export function AddProviderInstanceDialog({
               value={driver}
               onValueChange={(value) => setDriver(ProviderDriverKind.make(value))}
               aria-labelledby="add-instance-driver-label"
-              className="grid grid-cols-1 gap-2 sm:grid-cols-2"
+              className="grid grid-cols-1 sm:grid-cols-2"
             >
               {DRIVER_OPTIONS.map((option) => {
                 const IconComponent = option.icon;
diff --git a/apps/web/src/components/settings/DiagnosticsSettings.tsx b/apps/web/src/components/settings/DiagnosticsSettings.tsx
index 15fa80237da9fb2a40fea34dc5105babc26f9c73..15ad85bbb1a76a048785d6fc3479f67f52841d64 100644
--- a/apps/web/src/components/settings/DiagnosticsSettings.tsx
+++ b/apps/web/src/components/settings/DiagnosticsSettings.tsx
@@ -344,84 +344,86 @@ function ProcessDiagnosticsTable({
   }, []);
 
   return (
-    <ScrollArea
-      radius="none"
-      chainVerticalScroll
-      scrollFade
-      hideScrollbars
-      className="max-h-[min(64vh,44rem)] w-full max-w-full border-t border-border/60"
-    >
-      <table className="w-full min-w-[1040px] table-fixed text-left text-xs">
-        <colgroup>
-          <col className="w-[24%]" />
-          <col className="w-[8%]" />
-          <col className="w-[10%]" />
-          <col className="w-[33%]" />
-          <col className="w-[8%]" />
-          <col className="w-[11%]" />
-          <col className="w-[6%]" />
-        </colgroup>
-        <thead className="sticky top-0 z-10 border-b border-border/60 bg-card text-[11px] uppercase tracking-[0.08em] text-muted-foreground/70">
-          <tr>
-            <th className="px-4 py-2 font-semibold sm:pl-5">Name</th>
-            <th className="px-3 py-2 text-right font-semibold">CPU</th>
-            <th className="px-3 py-2 text-right font-semibold">Memory</th>
-            <th className="px-3 py-2 font-semibold">Command</th>
-            <th className="px-3 py-2 text-right font-semibold">PID</th>
-            <th className="px-3 py-2 font-semibold">Type</th>
-            <th className="p-2 text-right font-semibold sm:pr-4">Kill</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border/50">
-          {visibleProcesses.length === 0 ? (
+    <div className="border-t border-border/60">
+      <ScrollArea
+        radius="none"
+        chainVerticalScroll
+        scrollFade
+        hideScrollbars
+        className="max-h-[min(64vh,44rem)] w-full max-w-full"
+      >
+        <table className="w-full min-w-[1040px] table-fixed text-left text-xs">
+          <colgroup>
+            <col className="w-[24%]" />
+            <col className="w-[8%]" />
+            <col className="w-[10%]" />
+            <col className="w-[33%]" />
+            <col className="w-[8%]" />
+            <col className="w-[11%]" />
+            <col className="w-[6%]" />
+          </colgroup>
+          <thead className="sticky top-0 z-10 border-b border-border/60 bg-card text-[11px] uppercase tracking-[0.08em] text-muted-foreground/70">
             <tr>
-              <td colSpan={7} className="px-4 py-4 text-xs text-muted-foreground sm:px-5">
-                {emptyLabel ?? "No live descendant processes found."}
-              </td>
+              <th className="px-4 py-2 font-semibold sm:pl-5">Name</th>
+              <th className="px-3 py-2 text-right font-semibold">CPU</th>
+              <th className="px-3 py-2 text-right font-semibold">Memory</th>
+              <th className="px-3 py-2 font-semibold">Command</th>
+              <th className="px-3 py-2 text-right font-semibold">PID</th>
+              <th className="px-3 py-2 font-semibold">Type</th>
+              <th className="p-2 text-right font-semibold sm:pr-4">Kill</th>
             </tr>
-          ) : null}
-          {visibleProcesses.map((process) => (
-            <tr key={process.pid} className="hover:bg-muted/20">
-              <td className="px-4 py-2 align-middle sm:pl-5">
-                <ProcessNameCell
-                  process={process}
-                  isExpanded={!collapsedPids.has(process.pid)}
-                  onToggle={toggleProcess}
-                />
-              </td>
-              <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
-                {process.cpuPercent.toFixed(1)}%
-              </td>
-              <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
-                {formatBytes(process.rssBytes)}
-              </td>
-              <td className="px-3 py-2 align-middle text-muted-foreground">
-                <Tooltip>
-                  <TooltipTrigger
-                    render={<span className="block truncate">{process.command}</span>}
+          </thead>
+          <tbody className="divide-y divide-border/50">
+            {visibleProcesses.length === 0 ? (
+              <tr>
+                <td colSpan={7} className="px-4 py-4 text-xs text-muted-foreground sm:px-5">
+                  {emptyLabel ?? "No live descendant processes found."}
+                </td>
+              </tr>
+            ) : null}
+            {visibleProcesses.map((process) => (
+              <tr key={process.pid} className="hover:bg-muted/20">
+                <td className="px-4 py-2 align-middle sm:pl-5">
+                  <ProcessNameCell
+                    process={process}
+                    isExpanded={!collapsedPids.has(process.pid)}
+                    onToggle={toggleProcess}
                   />
-                  <TooltipPopup side="top" variant="code">
-                    {process.command}
-                  </TooltipPopup>
-                </Tooltip>
-              </td>
-              <td className="px-3 py-2 text-right align-middle font-mono tabular-nums text-muted-foreground">
-                {process.pid}
-              </td>
-              <td className="truncate px-3 py-2 align-middle text-muted-foreground">
-                {formatProcessType(process)}
-              </td>
-              <td className="p-2 align-middle sm:pr-4">
-                <ProcessSignalActions
-                  disabled={signalingPid === process.pid}
-                  onSignal={(signal) => onSignal(process.pid, signal)}
-                />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </ScrollArea>
+                </td>
+                <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
+                  {process.cpuPercent.toFixed(1)}%
+                </td>
+                <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
+                  {formatBytes(process.rssBytes)}
+                </td>
+                <td className="px-3 py-2 align-middle text-muted-foreground">
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={<span className="block truncate">{process.command}</span>}
+                    />
+                    <TooltipPopup side="top" variant="code">
+                      {process.command}
+                    </TooltipPopup>
+                  </Tooltip>
+                </td>
+                <td className="px-3 py-2 text-right align-middle font-mono tabular-nums text-muted-foreground">
+                  {process.pid}
+                </td>
+                <td className="truncate px-3 py-2 align-middle text-muted-foreground">
+                  {formatProcessType(process)}
+                </td>
+                <td className="p-2 align-middle sm:pr-4">
+                  <ProcessSignalActions
+                    disabled={signalingPid === process.pid}
+                    onSignal={(signal) => onSignal(process.pid, signal)}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </ScrollArea>
+    </div>
   );
 }
 
@@ -568,88 +570,90 @@ function ProcessResourceHistoryTable({
   }, null);
 
   return (
-    <ScrollArea
-      chainVerticalScroll
-      scrollFade
-      hideScrollbars
-      className="max-h-[min(64vh,44rem)] w-full max-w-full border-t border-border/60"
-    >
-      <table className="w-full min-w-[980px] table-fixed text-left text-xs">
-        <colgroup>
-          <col className="w-[24%]" />
-          <col className="w-[10%]" />
-          <col className="w-[10%]" />
-          <col className="w-[10%]" />
-          <col className="w-[10%]" />
-          <col className="w-[10%]" />
-          <col className="w-[16%]" />
-          <col className="w-[10%]" />
-        </colgroup>
-        <thead className="sticky top-0 z-10 border-b border-border/60 bg-card text-[11px] uppercase tracking-[0.08em] text-muted-foreground/70">
-          <tr>
-            <th className="px-4 py-2 font-semibold sm:pl-5">Process</th>
-            <th className="px-3 py-2 text-right font-semibold">CPU Time</th>
-            <th className="px-3 py-2 text-right font-semibold">Current</th>
-            <th className="px-3 py-2 text-right font-semibold">Average</th>
-            <th className="px-3 py-2 text-right font-semibold">Peak</th>
-            <th className="px-3 py-2 text-right font-semibold">Max Mem</th>
-            <th className="px-3 py-2 font-semibold">Command</th>
-            <th className="px-3 py-2 text-right font-semibold sm:pr-5">PID</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border/50">
-          {processes.length === 0 ? (
+    <div className="border-t border-border/60">
+      <ScrollArea
+        chainVerticalScroll
+        scrollFade
+        hideScrollbars
+        className="max-h-[min(64vh,44rem)] w-full max-w-full"
+      >
+        <table className="w-full min-w-[980px] table-fixed text-left text-xs">
+          <colgroup>
+            <col className="w-[24%]" />
+            <col className="w-[10%]" />
+            <col className="w-[10%]" />
+            <col className="w-[10%]" />
+            <col className="w-[10%]" />
+            <col className="w-[10%]" />
+            <col className="w-[16%]" />
+            <col className="w-[10%]" />
+          </colgroup>
+          <thead className="sticky top-0 z-10 border-b border-border/60 bg-card text-[11px] uppercase tracking-[0.08em] text-muted-foreground/70">
             <tr>
-              <td colSpan={8} className="px-4 py-4 text-xs text-muted-foreground sm:px-5">
-                {emptyLabel}
-              </td>
+              <th className="px-4 py-2 font-semibold sm:pl-5">Process</th>
+              <th className="px-3 py-2 text-right font-semibold">CPU Time</th>
+              <th className="px-3 py-2 text-right font-semibold">Current</th>
+              <th className="px-3 py-2 text-right font-semibold">Average</th>
+              <th className="px-3 py-2 text-right font-semibold">Peak</th>
+              <th className="px-3 py-2 text-right font-semibold">Max Mem</th>
+              <th className="px-3 py-2 font-semibold">Command</th>
+              <th className="px-3 py-2 text-right font-semibold sm:pr-5">PID</th>
             </tr>
-          ) : null}
-          {processes.map((process) => (
-            <tr key={process.processKey} className="hover:bg-muted/20">
-              <td className="px-4 py-2 align-middle sm:pl-5">
-                <ResourceHistoryProcessNameCell
-                  process={process}
-                  visualDepth={
-                    process.isServerRoot || shallowestChildDepth === null
-                      ? 0
-                      : Math.max(1, process.depth - shallowestChildDepth + 1)
-                  }
-                />
-              </td>
-              <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
-                {formatCpuTime(process.cpuSecondsApprox)}
-              </td>
-              <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
-                {process.currentCpuPercent.toFixed(1)}%
-              </td>
-              <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
-                {process.avgCpuPercent.toFixed(1)}%
-              </td>
-              <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
-                {process.maxCpuPercent.toFixed(1)}%
-              </td>
-              <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
-                {formatBytes(process.maxRssBytes)}
-              </td>
-              <td className="px-3 py-2 align-middle text-muted-foreground">
-                <Tooltip>
-                  <TooltipTrigger
-                    render={<span className="block truncate">{process.command}</span>}
+          </thead>
+          <tbody className="divide-y divide-border/50">
+            {processes.length === 0 ? (
+              <tr>
+                <td colSpan={8} className="px-4 py-4 text-xs text-muted-foreground sm:px-5">
+                  {emptyLabel}
+                </td>
+              </tr>
+            ) : null}
+            {processes.map((process) => (
+              <tr key={process.processKey} className="hover:bg-muted/20">
+                <td className="px-4 py-2 align-middle sm:pl-5">
+                  <ResourceHistoryProcessNameCell
+                    process={process}
+                    visualDepth={
+                      process.isServerRoot || shallowestChildDepth === null
+                        ? 0
+                        : Math.max(1, process.depth - shallowestChildDepth + 1)
+                    }
                   />
-                  <TooltipPopup side="top" variant="code">
-                    {process.command}
-                  </TooltipPopup>
-                </Tooltip>
-              </td>
-              <td className="px-3 py-2 text-right align-middle font-mono tabular-nums text-muted-foreground sm:pr-5">
-                {process.pid}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </ScrollArea>
+                </td>
+                <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
+                  {formatCpuTime(process.cpuSecondsApprox)}
+                </td>
+                <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
+                  {process.currentCpuPercent.toFixed(1)}%
+                </td>
+                <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
+                  {process.avgCpuPercent.toFixed(1)}%
+                </td>
+                <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
+                  {process.maxCpuPercent.toFixed(1)}%
+                </td>
+                <td className="px-3 py-2 text-right align-middle font-mono tabular-nums">
+                  {formatBytes(process.maxRssBytes)}
+                </td>
+                <td className="px-3 py-2 align-middle text-muted-foreground">
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={<span className="block truncate">{process.command}</span>}
+                    />
+                    <TooltipPopup side="top" variant="code">
+                      {process.command}
+                    </TooltipPopup>
+                  </Tooltip>
+                </td>
+                <td className="px-3 py-2 text-right align-middle font-mono tabular-nums text-muted-foreground sm:pr-5">
+                  {process.pid}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </ScrollArea>
+    </div>
   );
 }
 
diff --git a/apps/web/src/components/settings/IntegrationsSettings.tsx b/apps/web/src/components/settings/IntegrationsSettings.tsx
index a37dfa17363ee5e2c4f3730f32acb72faa20ad2c..f77cfcc25768d42e3c039cf160890ea7e6ab40ca 100644
--- a/apps/web/src/components/settings/IntegrationsSettings.tsx
+++ b/apps/web/src/components/settings/IntegrationsSettings.tsx
@@ -1278,14 +1278,11 @@ function BrowserProfilesSetting({ disabled }: { readonly disabled: boolean }) {
                     onCommit={(next) => renameProfile(profile.id, next)}
                   />
                 )}
-                {/*
-                  Dimmed with the rest of the row: a `Badge` has no disabled
-                  treatment of its own, so a solid `bg-primary` pill would
-                  otherwise sit at full strength beside a name, rename field
-                  and menu button that are all at 0.64.
-                */}
+                {/* Dimmed with the rest of the row, whose controls are all disabled. */}
                 {isDefault ? (
-                  <Badge className={cn(profileWritesDisabled && "opacity-64")}>Default</Badge>
+                  <span className={cn("flex", profileWritesDisabled && "opacity-64")}>
+                    <Badge>Default</Badge>
+                  </span>
                 ) : null}
               </span>
               <Menu>
diff --git a/apps/web/src/components/settings/ProviderAccentColorPicker.tsx b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
index 1e49dcab325298620f3f48fbfe6f9445a30bb644..22e91a24553d14dd53eee90c7f37b9f8f16eae12 100644
--- a/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
+++ b/apps/web/src/components/settings/ProviderAccentColorPicker.tsx
@@ -90,12 +90,7 @@ function ProviderCustomColorPicker(props: {
           </button>
         }
       />
-      <PopoverPopup
-        side="bottom"
-        align="start"
-        sideOffset={6}
-        className="overflow-hidden rounded-md p-0 [--viewport-inline-padding:0px] [&_[data-slot=popover-viewport]]:p-0"
-      >
+      <PopoverPopup side="bottom" align="start" sideOffset={6} padding="none">
         <ProviderCustomColorPanel value={normalized} onCommit={props.onCommit} />
         <PopoverClose
           render={
diff --git a/apps/web/src/components/settings/ProviderSettingsPanel.tsx b/apps/web/src/components/settings/ProviderSettingsPanel.tsx
index f4273f22cd1a43f3bc057aca9a77cff99835c97d..acec3be8387fd838bae7fec42fd1e60e51b6b020 100644
--- a/apps/web/src/components/settings/ProviderSettingsPanel.tsx
+++ b/apps/web/src/components/settings/ProviderSettingsPanel.tsx
@@ -353,7 +353,7 @@ function ProviderSettingsPanelContent(target: ProviderSettingsTarget) {
               <Tooltip key={environment.environmentId}>
                 <TooltipTrigger
                   render={
-                    <Toggle value={environment.environmentId} className="gap-2 text-left">
+                    <Toggle value={environment.environmentId}>
                       <EnvironmentMachineIcon
                         kind={machine}
                         className="size-3.5 shrink-0"
diff --git a/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx b/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
index 36326958550dffed842595fe19123ec6f9ce7f78..aa125e0efd4d4fd161f78f7f81084a6fc59eea3d 100644
--- a/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
+++ b/apps/web/src/components/settings/ResourceTelemetryDiagnostics.tsx
@@ -455,11 +455,13 @@ function ResourceHistoryChart({
                   </div>
                 }
               />
-              <TooltipPopup side="top" className="space-y-0.5 text-left">
-                <div>CPU avg {bucket.avgCpuPercent.toFixed(1)}%</div>
-                <div>CPU peak {bucket.maxCpuPercent.toFixed(1)}%</div>
-                <div>Read {formatBytes(bucket.ioReadBytes)}</div>
-                <div>Write {formatBytes(bucket.ioWriteBytes)}</div>
+              <TooltipPopup side="top" className="text-left">
+                <div className="space-y-0.5">
+                  <div>CPU avg {bucket.avgCpuPercent.toFixed(1)}%</div>
+                  <div>CPU peak {bucket.maxCpuPercent.toFixed(1)}%</div>
+                  <div>Read {formatBytes(bucket.ioReadBytes)}</div>
+                  <div>Write {formatBytes(bucket.ioWriteBytes)}</div>
+                </div>
               </TooltipPopup>
             </Tooltip>
           );
@@ -565,100 +567,102 @@ function ProcessTable({
   }, []);
 
   return (
-    <ScrollArea
-      chainVerticalScroll
-      scrollFade
-      hideScrollbars
-      className="max-h-[min(68vh,48rem)] w-full max-w-full border-t border-border/60"
-    >
-      <table className="w-full min-w-[1320px] table-fixed text-left text-xs">
-        <colgroup>
-          <col className="w-[20%]" />
-          <col className="w-[10%]" />
-          <col className="w-[7%]" />
-          <col className="w-[8%]" />
-          <col className="w-[9%]" />
-          <col className="w-[9%]" />
-          <col className="w-[9%]" />
-          <col className="w-[10%]" />
-          <col className="w-[8%]" />
-          <col className="w-[6%]" />
-          <col className="w-[4%]" />
-        </colgroup>
-        <thead className="sticky top-0 z-10 border-b border-border/60 bg-card text-[10px] uppercase tracking-[0.08em] text-muted-foreground/65">
-          <tr>
-            <th className="px-4 py-2 font-semibold sm:pl-5">Process</th>
-            <th className="px-3 py-2 font-semibold">Category</th>
-            <th className="px-3 py-2 text-right font-semibold">CPU</th>
-            <th className="px-3 py-2 text-right font-semibold">CPU Time</th>
-            <th className="px-3 py-2 text-right font-semibold">Memory</th>
-            <th className="px-3 py-2 text-right font-semibold">Read/s</th>
-            <th className="px-3 py-2 text-right font-semibold">Write/s</th>
-            <th className="px-3 py-2 text-right font-semibold">Read Total</th>
-            <th className="px-3 py-2 text-right font-semibold">Write Total</th>
-            <th className="px-3 py-2 text-right font-semibold">PID</th>
-            <th className="px-2 py-2 text-right font-semibold sm:pr-4">Kill</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border/50">
-          {visible.length === 0 ? (
+    <div className="border-t border-border/60">
+      <ScrollArea
+        chainVerticalScroll
+        scrollFade
+        hideScrollbars
+        className="max-h-[min(68vh,48rem)] w-full max-w-full"
+      >
+        <table className="w-full min-w-[1320px] table-fixed text-left text-xs">
+          <colgroup>
+            <col className="w-[20%]" />
+            <col className="w-[10%]" />
+            <col className="w-[7%]" />
+            <col className="w-[8%]" />
+            <col className="w-[9%]" />
+            <col className="w-[9%]" />
+            <col className="w-[9%]" />
+            <col className="w-[10%]" />
+            <col className="w-[8%]" />
+            <col className="w-[6%]" />
+            <col className="w-[4%]" />
+          </colgroup>
+          <thead className="sticky top-0 z-10 border-b border-border/60 bg-card text-[10px] uppercase tracking-[0.08em] text-muted-foreground/65">
             <tr>
-              <td colSpan={11} className="px-4 py-5 text-xs text-muted-foreground sm:px-5">
-                Waiting for the native process monitor.
-              </td>
+              <th className="px-4 py-2 font-semibold sm:pl-5">Process</th>
+              <th className="px-3 py-2 font-semibold">Category</th>
+              <th className="px-3 py-2 text-right font-semibold">CPU</th>
+              <th className="px-3 py-2 text-right font-semibold">CPU Time</th>
+              <th className="px-3 py-2 text-right font-semibold">Memory</th>
+              <th className="px-3 py-2 text-right font-semibold">Read/s</th>
+              <th className="px-3 py-2 text-right font-semibold">Write/s</th>
+              <th className="px-3 py-2 text-right font-semibold">Read Total</th>
+              <th className="px-3 py-2 text-right font-semibold">Write Total</th>
+              <th className="px-3 py-2 text-right font-semibold">PID</th>
+              <th className="px-2 py-2 text-right font-semibold sm:pr-4">Kill</th>
             </tr>
-          ) : null}
-          {visible.map((process) => (
-            <tr key={processIdentityKey(process)} className="hover:bg-muted/20">
-              <td className="px-4 py-2 sm:pl-5">
-                <ProcessTreeName
-                  process={process}
-                  collapsed={collapsed.has(processIdentityKey(process))}
-                  onToggle={toggle}
-                />
-              </td>
-              <td className="truncate px-3 py-2 text-[11px] text-muted-foreground">
-                {categoryLabel(process.category)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums">
-                {process.cpuPercent.toFixed(1)}%
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums">
-                {formatCpuTime(process.cpuTimeMs)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums">
-                {formatBytes(process.residentBytes)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-sky-700 dark:text-sky-300">
-                {formatRate(process.ioReadBytesPerSecond)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-amber-700 dark:text-amber-300">
-                {formatRate(process.ioWriteBytesPerSecond)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground">
-                {formatBytes(process.ioReadBytes)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground">
-                <Tooltip>
-                  <TooltipTrigger render={<span>{formatBytes(process.ioWriteBytes)}</span>} />
-                  <TooltipPopup side="top">{ioSemanticsLabel(process.ioSemantics)}</TooltipPopup>
-                </Tooltip>
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground">
-                {process.identity.pid}
-              </td>
-              <td className="px-2 py-2 text-right sm:pr-4">
-                <ProcessActions
-                  process={process}
-                  signalingKeys={signalingKeys}
-                  onSignal={onSignal}
-                />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </ScrollArea>
+          </thead>
+          <tbody className="divide-y divide-border/50">
+            {visible.length === 0 ? (
+              <tr>
+                <td colSpan={11} className="px-4 py-5 text-xs text-muted-foreground sm:px-5">
+                  Waiting for the native process monitor.
+                </td>
+              </tr>
+            ) : null}
+            {visible.map((process) => (
+              <tr key={processIdentityKey(process)} className="hover:bg-muted/20">
+                <td className="px-4 py-2 sm:pl-5">
+                  <ProcessTreeName
+                    process={process}
+                    collapsed={collapsed.has(processIdentityKey(process))}
+                    onToggle={toggle}
+                  />
+                </td>
+                <td className="truncate px-3 py-2 text-[11px] text-muted-foreground">
+                  {categoryLabel(process.category)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums">
+                  {process.cpuPercent.toFixed(1)}%
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums">
+                  {formatCpuTime(process.cpuTimeMs)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums">
+                  {formatBytes(process.residentBytes)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-sky-700 dark:text-sky-300">
+                  {formatRate(process.ioReadBytesPerSecond)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-amber-700 dark:text-amber-300">
+                  {formatRate(process.ioWriteBytesPerSecond)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground">
+                  {formatBytes(process.ioReadBytes)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground">
+                  <Tooltip>
+                    <TooltipTrigger render={<span>{formatBytes(process.ioWriteBytes)}</span>} />
+                    <TooltipPopup side="top">{ioSemanticsLabel(process.ioSemantics)}</TooltipPopup>
+                  </Tooltip>
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground">
+                  {process.identity.pid}
+                </td>
+                <td className="px-2 py-2 text-right sm:pr-4">
+                  <ProcessActions
+                    process={process}
+                    signalingKeys={signalingKeys}
+                    onSignal={onSignal}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </ScrollArea>
+    </div>
   );
 }
 
@@ -668,90 +672,92 @@ function HistoryProcessTable({
   processes: ReadonlyArray<ResourceTelemetryProcessSummary>;
 }) {
   return (
-    <ScrollArea
-      chainVerticalScroll
-      scrollFade
-      hideScrollbars
-      className="max-h-[28rem] w-full max-w-full border-t border-border/60"
-    >
-      <table className="w-full min-w-[1020px] table-fixed text-left text-xs">
-        <colgroup>
-          <col className="w-[24%]" />
-          <col className="w-[11%]" />
-          <col className="w-[10%]" />
-          <col className="w-[10%]" />
-          <col className="w-[11%]" />
-          <col className="w-[11%]" />
-          <col className="w-[11%]" />
-          <col className="w-[7%]" />
-          <col className="w-[5%]" />
-        </colgroup>
-        <thead className="sticky top-0 z-10 border-b border-border/60 bg-card text-[10px] uppercase tracking-[0.08em] text-muted-foreground/65">
-          <tr>
-            <th className="px-4 py-2 font-semibold sm:pl-5">Process</th>
-            <th className="px-3 py-2 font-semibold">Category</th>
-            <th className="px-3 py-2 text-right font-semibold">CPU Time</th>
-            <th className="px-3 py-2 text-right font-semibold">Peak CPU</th>
-            <th className="px-3 py-2 text-right font-semibold">Peak Mem</th>
-            <th className="px-3 py-2 text-right font-semibold">Read</th>
-            <th className="px-3 py-2 text-right font-semibold">Write</th>
-            <th className="px-3 py-2 text-right font-semibold">Samples</th>
-            <th className="px-3 py-2 text-right font-semibold sm:pr-5">PID</th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-border/50">
-          {processes.length === 0 ? (
+    <div className="border-t border-border/60">
+      <ScrollArea
+        chainVerticalScroll
+        scrollFade
+        hideScrollbars
+        className="max-h-[28rem] w-full max-w-full"
+      >
+        <table className="w-full min-w-[1020px] table-fixed text-left text-xs">
+          <colgroup>
+            <col className="w-[24%]" />
+            <col className="w-[11%]" />
+            <col className="w-[10%]" />
+            <col className="w-[10%]" />
+            <col className="w-[11%]" />
+            <col className="w-[11%]" />
+            <col className="w-[11%]" />
+            <col className="w-[7%]" />
+            <col className="w-[5%]" />
+          </colgroup>
+          <thead className="sticky top-0 z-10 border-b border-border/60 bg-card text-[10px] uppercase tracking-[0.08em] text-muted-foreground/65">
             <tr>
-              <td colSpan={9} className="px-4 py-5 text-xs text-muted-foreground sm:px-5">
-                No retained process samples in this window.
-              </td>
+              <th className="px-4 py-2 font-semibold sm:pl-5">Process</th>
+              <th className="px-3 py-2 font-semibold">Category</th>
+              <th className="px-3 py-2 text-right font-semibold">CPU Time</th>
+              <th className="px-3 py-2 text-right font-semibold">Peak CPU</th>
+              <th className="px-3 py-2 text-right font-semibold">Peak Mem</th>
+              <th className="px-3 py-2 text-right font-semibold">Read</th>
+              <th className="px-3 py-2 text-right font-semibold">Write</th>
+              <th className="px-3 py-2 text-right font-semibold">Samples</th>
+              <th className="px-3 py-2 text-right font-semibold sm:pr-5">PID</th>
             </tr>
-          ) : null}
-          {processes.map((process) => (
-            <tr key={processSummaryIdentityKey(process)} className="hover:bg-muted/20">
-              <td className="px-4 py-2 sm:pl-5">
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <span className="block truncate font-medium text-foreground">
-                        {process.name || process.command}
-                      </span>
-                    }
-                  />
-                  <TooltipPopup side="top" variant="code">
-                    {process.command || process.name}
-                  </TooltipPopup>
-                </Tooltip>
-              </td>
-              <td className="truncate px-3 py-2 text-[11px] text-muted-foreground">
-                {categoryLabel(process.category)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums">
-                {formatCpuTime(process.cpuTimeMs)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums">
-                {process.maxCpuPercent.toFixed(1)}%
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums">
-                {formatBytes(process.peakRssBytes)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-sky-700 dark:text-sky-300">
-                {formatBytes(process.ioReadBytes)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-amber-700 dark:text-amber-300">
-                {formatBytes(process.ioWriteBytes)}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground">
-                {process.sampleCount}
-              </td>
-              <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground sm:pr-5">
-                {process.identity.pid}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </ScrollArea>
+          </thead>
+          <tbody className="divide-y divide-border/50">
+            {processes.length === 0 ? (
+              <tr>
+                <td colSpan={9} className="px-4 py-5 text-xs text-muted-foreground sm:px-5">
+                  No retained process samples in this window.
+                </td>
+              </tr>
+            ) : null}
+            {processes.map((process) => (
+              <tr key={processSummaryIdentityKey(process)} className="hover:bg-muted/20">
+                <td className="px-4 py-2 sm:pl-5">
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
+                        <span className="block truncate font-medium text-foreground">
+                          {process.name || process.command}
+                        </span>
+                      }
+                    />
+                    <TooltipPopup side="top" variant="code">
+                      {process.command || process.name}
+                    </TooltipPopup>
+                  </Tooltip>
+                </td>
+                <td className="truncate px-3 py-2 text-[11px] text-muted-foreground">
+                  {categoryLabel(process.category)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums">
+                  {formatCpuTime(process.cpuTimeMs)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums">
+                  {process.maxCpuPercent.toFixed(1)}%
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums">
+                  {formatBytes(process.peakRssBytes)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-sky-700 dark:text-sky-300">
+                  {formatBytes(process.ioReadBytes)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-amber-700 dark:text-amber-300">
+                  {formatBytes(process.ioWriteBytes)}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground">
+                  {process.sampleCount}
+                </td>
+                <td className="px-3 py-2 text-right font-mono tabular-nums text-muted-foreground sm:pr-5">
+                  {process.identity.pid}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </ScrollArea>
+    </div>
   );
 }
 
diff --git a/apps/web/src/components/settings/SettingsScopeNotice.tsx b/apps/web/src/components/settings/SettingsScopeNotice.tsx
index 1bf365b729e76454da27fc523ec94c4137d775af..bd248370db5370620950077b06347504a9031110 100644
--- a/apps/web/src/components/settings/SettingsScopeNotice.tsx
+++ b/apps/web/src/components/settings/SettingsScopeNotice.tsx
@@ -66,7 +66,7 @@ export function SettingsScopeNotice({
       <Alert role="status">
         <AlertDescription>
           <p>{children}</p>
-          <AlertAction className="flex-wrap gap-2">
+          <AlertAction className="flex-wrap">
             {choices.map((choice) => (
               <Button
                 key={JSON.stringify(choice.search)}
diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index e34d6036a900b365916c51ff73862e3bb9b759b0..5f4d29b00bc4ef1b7832dfe74bea2989133b0cf2 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -234,113 +234,117 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
   return (
     <>
       <SidebarContent className="overflow-x-hidden">
-        <SidebarGroup className="gap-2">
-          <div className="flex h-8 items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-sidebar-muted-foreground hover:bg-sidebar-row-hover hover:text-sidebar-foreground">
-            <SearchIcon className="size-4 shrink-0 text-sidebar-muted-foreground/80" />
-            <SidebarInput
-              ref={searchInputRef}
-              nativeInput
-              type="search"
-              value={query}
-              onChange={(event) => {
-                setQuery(event.currentTarget.value);
-                setActiveResultIndex(0);
-              }}
-              onKeyDown={handleSearchKeyDown}
-              placeholder="Search"
-              aria-label="Search settings"
-              role="combobox"
-              aria-autocomplete="list"
-              aria-expanded={isSearching && hasResults}
-              aria-controls={isSearching && hasResults ? "settings-search-results" : undefined}
-              aria-activedescendant={
-                isSearching && results[activeResultIndex]
-                  ? `settings-search-result-${results[activeResultIndex].id}`
-                  : undefined
-              }
-              className="min-w-0 flex-1"
-            />
-            {isSearching ? (
-              <Button
-                type="button"
-                size="icon-micro"
-                variant="ghost"
-                className="shrink-0 text-sidebar-muted-foreground hover:bg-sidebar-control-surface hover:text-sidebar-foreground"
-                aria-label="Clear settings search"
-                onClick={() => {
-                  clearSearch();
-                  searchInputRef.current?.focus();
+        <SidebarGroup>
+          <div className="flex flex-col gap-2">
+            <div className="flex h-8 items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-sidebar-muted-foreground hover:bg-sidebar-row-hover hover:text-sidebar-foreground">
+              <SearchIcon className="size-4 shrink-0 text-sidebar-muted-foreground/80" />
+              <SidebarInput
+                ref={searchInputRef}
+                nativeInput
+                type="search"
+                value={query}
+                onChange={(event) => {
+                  setQuery(event.currentTarget.value);
+                  setActiveResultIndex(0);
                 }}
+                onKeyDown={handleSearchKeyDown}
+                placeholder="Search"
+                aria-label="Search settings"
+                role="combobox"
+                aria-autocomplete="list"
+                aria-expanded={isSearching && hasResults}
+                aria-controls={isSearching && hasResults ? "settings-search-results" : undefined}
+                aria-activedescendant={
+                  isSearching && results[activeResultIndex]
+                    ? `settings-search-result-${results[activeResultIndex].id}`
+                    : undefined
+                }
+                className="min-w-0 flex-1"
+              />
+              {isSearching ? (
+                <Button
+                  type="button"
+                  size="icon-micro"
+                  variant="ghost"
+                  className="shrink-0 text-sidebar-muted-foreground hover:bg-sidebar-control-surface hover:text-sidebar-foreground"
+                  aria-label="Clear settings search"
+                  onClick={() => {
+                    clearSearch();
+                    searchInputRef.current?.focus();
+                  }}
+                >
+                  <XIcon className="size-3" />
+                </Button>
+              ) : (
+                <Kbd>/</Kbd>
+              )}
+            </div>
+            {isSearching && results.length === 0 ? (
+              <p
+                role="status"
+                className="px-2 py-6 text-center text-xs text-sidebar-muted-foreground"
               >
-                <XIcon className="size-3" />
-              </Button>
-            ) : (
-              <Kbd>/</Kbd>
-            )}
-          </div>
-          {isSearching && results.length === 0 ? (
-            <p
-              role="status"
-              className="px-2 py-6 text-center text-xs text-sidebar-muted-foreground"
-            >
-              No settings found
-            </p>
-          ) : null}
-          {isSearching ? (
-            <SidebarMenu
-              className="ps-px"
-              id={hasResults ? "settings-search-results" : undefined}
-              role={hasResults ? "listbox" : undefined}
-              aria-label={hasResults ? "Settings search results" : undefined}
-            >
-              {results.map((item, index) => (
-                <SidebarMenuItem key={item.id} role="presentation">
-                  <SidebarMenuButton
-                    id={`settings-search-result-${item.id}`}
-                    role="option"
-                    aria-selected={index === activeResultIndex}
-                    tabIndex={-1}
-                    size="sm"
-                    isActive={index === activeResultIndex}
-                    className="h-auto min-h-10 items-start gap-2 rounded-md px-2 py-2 text-left hover:bg-sidebar-row-hover hover:text-sidebar-foreground"
-                    onMouseMove={() => setActiveResultIndex(index)}
-                    onClick={() => handleSearchResultClick(item)}
-                  >
-                    <SettingsSectionIcon to={item.to} />
-                    <span className="min-w-0 flex-1">
-                      <span className="block truncate text-sm font-medium text-sidebar-foreground">
-                        {item.title}
-                      </span>
-                      <span className="block truncate text-[11px] text-sidebar-muted-foreground/75">
-                        {SETTINGS_SECTION_LABELS[item.to]}
-                      </span>
-                    </span>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
-            </SidebarMenu>
-          ) : (
-            <SidebarMenu className="ps-px">
-              {navItems.map((item) => {
-                const Icon = item.icon;
-                const isGeneralDetailPage =
-                  item.to === "/settings/general" && pathname === "/settings/open-source-licenses";
-                const isActive =
-                  isGeneralDetailPage || pathname === item.to || pathname.startsWith(`${item.to}/`);
-                return (
-                  <SidebarMenuItem key={item.to}>
+                No settings found
+              </p>
+            ) : null}
+            {isSearching ? (
+              <SidebarMenu
+                id={hasResults ? "settings-search-results" : undefined}
+                role={hasResults ? "listbox" : undefined}
+                aria-label={hasResults ? "Settings search results" : undefined}
+              >
+                {results.map((item, index) => (
+                  <SidebarMenuItem key={item.id} role="presentation">
                     <SidebarMenuButton
-                      isActive={isActive}
-                      onClick={() => handleSectionClick(item.to)}
+                      id={`settings-search-result-${item.id}`}
+                      role="option"
+                      aria-selected={index === activeResultIndex}
+                      tabIndex={-1}
+                      size="sm"
+                      isActive={index === activeResultIndex}
+                      className="h-auto min-h-10 items-start"
+                      onMouseMove={() => setActiveResultIndex(index)}
+                      onClick={() => handleSearchResultClick(item)}
                     >
-                      <Icon />
-                      <span className="truncate">{item.label}</span>
+                      <SettingsSectionIcon to={item.to} />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate text-sm font-medium text-sidebar-foreground">
+                          {item.title}
+                        </span>
+                        <span className="block truncate text-[11px] text-sidebar-muted-foreground/75">
+                          {SETTINGS_SECTION_LABELS[item.to]}
+                        </span>
+                      </span>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
-          )}
+                ))}
+              </SidebarMenu>
+            ) : (
+              <SidebarMenu>
+                {navItems.map((item) => {
+                  const Icon = item.icon;
+                  const isGeneralDetailPage =
+                    item.to === "/settings/general" &&
+                    pathname === "/settings/open-source-licenses";
+                  const isActive =
+                    isGeneralDetailPage ||
+                    pathname === item.to ||
+                    pathname.startsWith(`${item.to}/`);
+                  return (
+                    <SidebarMenuItem key={item.to}>
+                      <SidebarMenuButton
+                        isActive={isActive}
+                        onClick={() => handleSectionClick(item.to)}
+                      >
+                        <Icon />
+                        <span className="truncate">{item.label}</span>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            )}
+          </div>
         </SidebarGroup>
       </SidebarContent>
       <SidebarFooter>
diff --git a/apps/web/src/components/settings/ThemeColorPicker.tsx b/apps/web/src/components/settings/ThemeColorPicker.tsx
index 5def3f06606942d9cb0a4e3c7fcd293c85ab3216..864b2e35e62883763d849c1cdf7552e4ab80560a 100644
--- a/apps/web/src/components/settings/ThemeColorPicker.tsx
+++ b/apps/web/src/components/settings/ThemeColorPicker.tsx
@@ -284,7 +284,7 @@ function ThemeColorPicker({
       </Tooltip>
       <PopoverPopup
         align="end"
-        className="overflow-hidden rounded-2xl border border-border/70 p-0 shadow-2xl [--viewport-inline-padding:0px] [&_[data-slot=popover-viewport]]:p-0"
+        padding="none"
         data-theme-editor-panel=""
         side="bottom"
         sideOffset={10}
@@ -353,7 +353,7 @@ export const ThemeColorField = memo(function ThemeColorField({
         <Input
           aria-invalid={!isColorValue}
           aria-label={`${label} hex value`}
-          className="w-28 shrink-0 [&_[data-slot=input]]:text-right"
+          className="w-28 shrink-0"
           font="mono"
           id={`${role}-hex`}
           nativeInput
diff --git a/apps/web/src/components/settings/ThemeEditorPanel.tsx b/apps/web/src/components/settings/ThemeEditorPanel.tsx
index 02d1dad458f13f798b7d558d15f8be4609fed551..339fc4b0c72b49ce23f01713be18f50b85d8d36b 100644
--- a/apps/web/src/components/settings/ThemeEditorPanel.tsx
+++ b/apps/web/src/components/settings/ThemeEditorPanel.tsx
@@ -947,11 +947,7 @@ export function ThemeEditorPanel({
     // A locked mode stays hoverable so the tooltip can say why it is off;
     // a real disabled attribute would swallow the pointer events.
     const button = (
-      <Toggle
-        aria-disabled={lockReason !== null}
-        value={appearance}
-        className={lockReason !== null ? "opacity-50" : undefined}
-      >
+      <Toggle aria-disabled={lockReason !== null} value={appearance}>
         {appearance === "light" ? "Light" : "Dark"}
       </Toggle>
     );
diff --git a/apps/web/src/components/sidebar/SidebarChrome.tsx b/apps/web/src/components/sidebar/SidebarChrome.tsx
index 0bcc8e07c2b4e587a86d1dce9b4efaa47f4eb3f0..c956ab0a63c81ba6556a8b1629ae4731b606842a 100644
--- a/apps/web/src/components/sidebar/SidebarChrome.tsx
+++ b/apps/web/src/components/sidebar/SidebarChrome.tsx
@@ -17,7 +17,6 @@ import {
 import { Badge } from "../ui/badge";
 import {
   SidebarFooter,
-  SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -48,18 +47,19 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
       : null;
 
   return (
-    <SidebarHeader
+    // The titlebar row, not a padded SidebarHeader: it aligns to the window controls.
+    <div
       className={cn(
-        "@container/sidebar-header relative h-[var(--workspace-topbar-height)] shrink-0 flex-row items-center px-3 py-0 md:px-0",
+        "@container/sidebar-header relative flex h-[var(--workspace-topbar-height)] shrink-0 flex-row items-center gap-2 px-3 md:px-0",
         isElectron && "drag-region",
       )}
     >
       {backdropVariant ? <SidebarStageBackdrop variant={backdropVariant} /> : null}
       <SidebarTrigger
+        // Over the stage artwork: the media viewer's control-on-imagery treatment.
+        variant={backdropVariant ? "media-navigation" : "ghost"}
         className={cn(
-          "relative z-10 md:hidden",
-          backdropVariant &&
-            "focus-visible:ring-white/90 [&_svg]:stroke-white/90! [&_svg]:opacity-100! [&_svg]:hover:stroke-white! [:hover,[data-pressed]]:bg-white/15",
+          "relative top-auto z-10 translate-y-0 md:hidden",
           backdropVariant && resolveSidebarStageFocusRingOffsetClass(backdropVariant),
         )}
       />
@@ -74,7 +74,7 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
           {pillLabel}
         </Badge>
       ) : null}
-    </SidebarHeader>
+    </div>
   );
 });
 
diff --git a/apps/web/src/components/sidebar/SidebarThreadHeader.tsx b/apps/web/src/components/sidebar/SidebarThreadHeader.tsx
index 424c50e7f2a2fc060d23443fe8511b75ea38ee6f..07c1c8e86535bb6da9f177ff62bfeea5931a2d00 100644
--- a/apps/web/src/components/sidebar/SidebarThreadHeader.tsx
+++ b/apps/web/src/components/sidebar/SidebarThreadHeader.tsx
@@ -187,10 +187,7 @@ export function SidebarHeaderIconButton({
             type="button"
             aria-label={label}
             {...rest}
-            className={cn(
-              "relative size-7 shrink-0 focus-visible:ring-offset-2 focus-visible:ring-offset-sidebar",
-              className,
-            )}
+            className={cn("relative size-7 shrink-0", className)}
           />
         }
       >
diff --git a/apps/web/src/components/sidebar/SidebarUpdatePill.tsx b/apps/web/src/components/sidebar/SidebarUpdatePill.tsx
index e1609d4d3bc41c172e7d5d0801b45c745426627b..f8f61f521032caea2459966716e0ad7ea9a4dc44 100644
--- a/apps/web/src/components/sidebar/SidebarUpdatePill.tsx
+++ b/apps/web/src/components/sidebar/SidebarUpdatePill.tsx
@@ -393,7 +393,6 @@ function SidebarUpdateControl() {
           <PopoverPopup
             align="center"
             aria-label="Nightly update release notes"
-            className="text-balance shadow-xl shadow-black/25"
             initialFocus={false}
             onKeyDownCapture={(event) => {
               if (
diff --git a/apps/web/src/components/sidebar/SidebarUpdateReleaseNotes.tsx b/apps/web/src/components/sidebar/SidebarUpdateReleaseNotes.tsx
index 89204d1bd89b10f2c5e157d7a2ca9cdd51e747d6..ef9713fd731240bb3dd46a2a2982518da3445729 100644
--- a/apps/web/src/components/sidebar/SidebarUpdateReleaseNotes.tsx
+++ b/apps/web/src/components/sidebar/SidebarUpdateReleaseNotes.tsx
@@ -85,7 +85,7 @@ export function SidebarUpdateReleaseNotes({
 
           return (
             <div key={releaseNote.version}>
-              {index > 0 && <Separator className="my-3 bg-border/60" />}
+              {index > 0 && <Separator className="my-3" />}
               <section>
                 <h3 className="text-foreground text-xs leading-4 font-semibold">
                   {index === 0 ? "What's changed" : `Changes in ${releaseNote.version}`}
@@ -108,7 +108,7 @@ export function SidebarUpdateReleaseNotes({
         })}
         {state.omittedReleaseCount > 0 ? (
           <div>
-            <Separator className="my-3 bg-border/60" />
+            <Separator className="my-3" />
             <ReleaseLink releaseUrl={getDesktopUpdateReleaseHistoryUrl()} shell={shell}>
               {`${state.omittedReleaseCount} older ${state.omittedReleaseCount === 1 ? "release" : "releases"} on GitHub`}
             </ReleaseLink>
diff --git a/apps/web/src/components/ui/toggle.tsx b/apps/web/src/components/ui/toggle.tsx
index 844c5c1e78586902e671a1368ece7bbbf24c8935..070d47466a7d3cbd02f632075545e266b7a5a847 100644
--- a/apps/web/src/components/ui/toggle.tsx
+++ b/apps/web/src/components/ui/toggle.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "~/lib/utils";
 
 const toggleVariants = cva(
-  "[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 aria-disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     defaultVariants: {
       size: "default",
diff --git a/apps/web/src/components/usage/UsageLimitsPooled.tsx b/apps/web/src/components/usage/UsageLimitsPooled.tsx
index 1317cef898392975f6a61a100029ab37ef8f5402..49b99ed4e24aa8a77b5b65db3f7044afaead6e12 100644
--- a/apps/web/src/components/usage/UsageLimitsPooled.tsx
+++ b/apps/web/src/components/usage/UsageLimitsPooled.tsx
@@ -345,7 +345,8 @@ function LegendRow({
   return (
     <PopoverTrigger
       style={{ gridColumn: "1 / -1", gridRow: index + 1 }}
-      className="flex min-h-7 min-w-0 cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-start text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring @2xl/pool:hidden"
+      render={<Button variant="ghost" size="compact" />}
+      className="min-w-0 @2xl/pool:hidden"
     >
       <span className="relative inline-flex size-4 shrink-0 items-center justify-center rounded-sm text-[10px] leading-none font-semibold text-foreground/80 tabular-nums">
         <span
diff --git a/apps/web/src/components/usage/UsagePriceOverrides.tsx b/apps/web/src/components/usage/UsagePriceOverrides.tsx
index 5b9388fe1d7fdd30a981a2c4185fa72c3fa2ca05..79ad4d473409ee2cebd6561479fa5ab56c2d6448 100644
--- a/apps/web/src/components/usage/UsagePriceOverrides.tsx
+++ b/apps/web/src/components/usage/UsagePriceOverrides.tsx
@@ -323,12 +323,12 @@ export function UsagePriceOverrides({
                     <col className="w-10" />
                   </colgroup>
                   <TableHeader>
-                    <TableRow className="hover:bg-transparent">
-                      <TableHead className="pl-3">Model ID</TableHead>
+                    <TableRow>
+                      <TableHead>Model ID</TableHead>
                       {USAGE_PRICE_FIELDS.map((field) => (
                         <TableHead key={field.key}>{field.label}</TableHead>
                       ))}
-                      <TableHead className="px-1">
+                      <TableHead>
                         <Button
                           size="icon-xs"
                           variant="ghost"
@@ -347,24 +347,19 @@ export function UsagePriceOverrides({
                   </TableHeader>
                   <TableBody>
                     {rows.length === 0 ? (
-                      <TableRow className="hover:bg-transparent">
-                        <TableCell
-                          colSpan={6}
-                          className="py-8 text-center whitespace-normal text-muted-foreground"
-                        >
-                          {selected.some((environment) => environment.prices === null)
-                            ? "Some environment prices are unavailable."
-                            : "No custom prices. Add a row to override automatic pricing."}
+                      <TableRow>
+                        <TableCell colSpan={6} className="text-center whitespace-normal">
+                          <p className="py-6 text-muted-foreground">
+                            {selected.some((environment) => environment.prices === null)
+                              ? "Some environment prices are unavailable."
+                              : "No custom prices. Add a row to override automatic pricing."}
+                          </p>
                         </TableCell>
                       </TableRow>
                     ) : (
                       rows.map((row) => (
-                        <TableRow
-                          key={row.id}
-                          data-row-id={row.id}
-                          className="hover:bg-transparent"
-                        >
-                          <TableCell className="pl-3 whitespace-normal">
+                        <TableRow key={row.id} data-row-id={row.id}>
+                          <TableCell className="whitespace-normal">
                             {row.isNew ? (
                               <Input
                                 size="compact"
@@ -407,14 +402,16 @@ export function UsagePriceOverrides({
                             ) : null}
                           </TableCell>
                           {row.removed ? (
-                            <TableCell colSpan={4} className="text-muted-foreground">
-                              Automatic pricing after saving
+                            <TableCell colSpan={4}>
+                              <span className="text-muted-foreground">
+                                Automatic pricing after saving
+                              </span>
                             </TableCell>
                           ) : (
                             USAGE_PRICE_FIELDS.map((field) => {
                               const cell = usagePriceCell(selected, row.model, field.key);
                               return (
-                                <TableCell key={field.key} className="px-1">
+                                <TableCell key={field.key}>
                                   <Input
                                     size="compact"
                                     inputMode="decimal"
@@ -438,7 +435,7 @@ export function UsagePriceOverrides({
                               );
                             })
                           )}
-                          <TableCell className="px-1">
+                          <TableCell>
                             <Tooltip>
                               <TooltipTrigger
                                 render={<Button size="icon-xs" variant="ghost" />}
diff --git a/apps/web/src/routes/_chat.pull-requests.tsx b/apps/web/src/routes/_chat.pull-requests.tsx
index 7b7f4b376b0282d68462d35f99a15d24ba68c256..7b3d4d4418dd64f8e6f3ca6422a1d3f7110eacaa 100644
--- a/apps/web/src/routes/_chat.pull-requests.tsx
+++ b/apps/web/src/routes/_chat.pull-requests.tsx
@@ -218,7 +218,7 @@ function PullRequestGroupHeader({
       <Icon aria-hidden className="size-3.5 shrink-0" />
       <h2 className="shrink-0">{group.label}</h2>
       <span className="shrink-0 tabular-nums text-muted-foreground/50">{group.entries.length}</span>
-      <Separator className="min-w-2 flex-1 bg-border/60" />
+      <Separator className="min-w-2 flex-1" />
     </div>
   );
 }
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index 8041a18f3532a2480029de111624527945cec975..5342f99227bf439703dc2a29f7ca9b52134b814e 100644
--- a/scripts/lint-restyle-ceiling.ts
+++ b/scripts/lint-restyle-ceiling.ts
@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 402;
+export const RESTYLE_CEILING = 250;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0