From 1a81ea8c153214ddc74b7046062a8957c2612e8d Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 12:22:10 -0700
Subject: [PATCH] refactor(web): fold repeated overrides into ui defaults
 (#13021)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/components/NoActiveThreadState.tsx    |  4 ++--
 apps/web/src/components/NoProjectsHero.tsx         |  8 ++------
 apps/web/src/components/ProjectScriptsControl.tsx  |  6 +++---
 apps/web/src/components/chat/OpenInPicker.tsx      |  2 +-
 .../components/chat/SnapShotAttachmentDetails.tsx  |  2 +-
 .../src/components/device/DeviceToolVersions.tsx   |  2 +-
 .../components/pullRequest/PullRequestComposer.tsx |  2 +-
 .../pullRequest/PullRequestListFilters.tsx         |  1 -
 apps/web/src/components/ui/empty.tsx               |  2 +-
 apps/web/src/components/ui/menu.tsx                |  6 ++++--
 apps/web/src/components/ui/popover.tsx             |  2 +-
 apps/web/src/components/usage/UsagePage.tsx        |  1 -
 apps/web/src/routes/_chat.index.tsx                | 14 +++++---------
 scripts/lint-restyle-ceiling.ts                    |  2 +-
 14 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/apps/web/src/components/NoActiveThreadState.tsx b/apps/web/src/components/NoActiveThreadState.tsx
index 79da7a0cad1965799b24c331a7d3e4662cacdba2..651c664b6aa88e643bfd3017edcd5941af0979e6 100644
--- a/apps/web/src/components/NoActiveThreadState.tsx
+++ b/apps/web/src/components/NoActiveThreadState.tsx
@@ -22,8 +22,8 @@ export function NoActiveThreadState() {
         <Empty className="flex-1">
           <div className="w-full max-w-lg px-8 py-12">
             <EmptyHeader className="max-w-none">
-              <EmptyTitle className="text-foreground">Pick a thread to continue</EmptyTitle>
-              <EmptyDescription className="mt-2 text-muted-foreground/78">
+              <EmptyTitle>Pick a thread to continue</EmptyTitle>
+              <EmptyDescription>
                 Select an existing thread or create a new one to get started.
               </EmptyDescription>
             </EmptyHeader>
diff --git a/apps/web/src/components/NoProjectsHero.tsx b/apps/web/src/components/NoProjectsHero.tsx
index 5aa29a729b696a85e138efeaf6ca5b9686f72ca2..daa371fc131029eea1851fab99e199c486a623a7 100644
--- a/apps/web/src/components/NoProjectsHero.tsx
+++ b/apps/web/src/components/NoProjectsHero.tsx
@@ -15,12 +15,8 @@ export function NoProjectsHero() {
         <Empty className="flex-1">
           <div className="w-full max-w-lg px-8 py-12">
             <EmptyHeader className="max-w-none">
-              <EmptyTitle className="text-foreground text-2xl sm:text-3xl">
-                What should we work on?
-              </EmptyTitle>
-              <EmptyDescription className="mt-2 text-muted-foreground/78">
-                Add a project to start your first thread.
-              </EmptyDescription>
+              <EmptyTitle className="text-2xl sm:text-3xl">What should we work on?</EmptyTitle>
+              <EmptyDescription>Add a project to start your first thread.</EmptyDescription>
               <div className="mt-6 flex justify-center">
                 <Button size="sm" onClick={openAddProject}>
                   <PlusIcon className="size-4" />
diff --git a/apps/web/src/components/ProjectScriptsControl.tsx b/apps/web/src/components/ProjectScriptsControl.tsx
index 74bd84918713c2fd2242491881515f1506d5dc10..c1104824bedcfba11f93714f3ff973c5d55edd6e 100644
--- a/apps/web/src/components/ProjectScriptsControl.tsx
+++ b/apps/web/src/components/ProjectScriptsControl.tsx
@@ -157,7 +157,7 @@ export default function ProjectScriptsControl({
             onClick={() => void importFileScript(fileScript)}
           >
             <ScriptIcon icon={fileScript.icon ?? "play"} className="size-4" />
-            <MenuItemLabel className="truncate">{fileScript.name}</MenuItemLabel>
+            <MenuItemLabel>{fileScript.name}</MenuItemLabel>
             <MenuShortcut>
               <DownloadIcon className="size-3.5" aria-label="Import" />
             </MenuShortcut>
@@ -182,7 +182,7 @@ export default function ProjectScriptsControl({
             onClick={() => onRunScript(script)}
           >
             <ScriptIcon icon={script.icon} className="size-4" />
-            <MenuItemLabel className="truncate">
+            <MenuItemLabel>
               {script.runOnWorktreeCreate ? `${script.name} (setup)` : script.name}
             </MenuItemLabel>
             <span className="relative ms-auto flex h-6 min-w-6 items-center justify-end">
@@ -241,7 +241,7 @@ export default function ProjectScriptsControl({
               onClick={() => onRunScript(primaryScript)}
             >
               <ScriptIcon icon={primaryScript.icon} className="size-4" />
-              <MenuItemLabel className="truncate">Run {primaryScript.name}</MenuItemLabel>
+              <MenuItemLabel>Run {primaryScript.name}</MenuItemLabel>
               <MenuShortcut>
                 {shortcutLabelForCommand(keybindings, commandForProjectScript(primaryScript.id))}
               </MenuShortcut>
diff --git a/apps/web/src/components/chat/OpenInPicker.tsx b/apps/web/src/components/chat/OpenInPicker.tsx
index 0f8f8cbc45c366e1504b31b5ce2ec7a698ff3e91..e272345a345f888f8b083b6b88b74cdee4759563 100644
--- a/apps/web/src/components/chat/OpenInPicker.tsx
+++ b/apps/web/src/components/chat/OpenInPicker.tsx
@@ -332,7 +332,7 @@ export const OpenInPicker = memo(function OpenInPicker({
             onClick={() => openInEditor(preferredEditor)}
           >
             <primaryOption.Icon className={cn("size-4", getOpenInIconClass(primaryOption.kind))} />
-            <MenuItemLabel className="truncate">Open in {primaryOption.label}</MenuItemLabel>
+            <MenuItemLabel>Open in {primaryOption.label}</MenuItemLabel>
             {openFavoriteEditorShortcutLabel && (
               <MenuShortcut>{openFavoriteEditorShortcutLabel}</MenuShortcut>
             )}
diff --git a/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx b/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
index da1b82032772bc90266f49b3716ba2c8cc7a30d9..e37b3f0824b01a2119eff2306a26e7218e81aa9e 100644
--- a/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
+++ b/apps/web/src/components/chat/SnapShotAttachmentDetails.tsx
@@ -170,7 +170,7 @@ export function SnapShotContentsButton({
         viewportClassName="max-h-[min(28rem,70vh)]"
       >
         <div className="space-y-2">
-          <PopoverTitle className="text-sm leading-5">Accessibility data</PopoverTitle>
+          <PopoverTitle>Accessibility data</PopoverTitle>
           {accessibilityDetails ? (
             <SnapShotAccessibilityData
               details={accessibilityDetails}
diff --git a/apps/web/src/components/device/DeviceToolVersions.tsx b/apps/web/src/components/device/DeviceToolVersions.tsx
index d9a79f4bddb59e19df1d60a220e235c50fca2ed0..cf39aeea5439aa226fd56f9d54b512b0b91b5b14 100644
--- a/apps/web/src/components/device/DeviceToolVersions.tsx
+++ b/apps/web/src/components/device/DeviceToolVersions.tsx
@@ -45,7 +45,7 @@ export function DeviceToolVersions({
             : "Versions"}
       </PopoverTrigger>
       <PopoverPopup align="end" className="w-80">
-        <PopoverTitle className="text-sm">{kind ? label : "Device tools"}</PopoverTitle>
+        <PopoverTitle>{kind ? label : "Device tools"}</PopoverTitle>
         {tools ? (
           <div className="mt-4 divide-y divide-border/50">
             {(
diff --git a/apps/web/src/components/pullRequest/PullRequestComposer.tsx b/apps/web/src/components/pullRequest/PullRequestComposer.tsx
index bd5839e1bf2671e5c77b5654c196cd01b76949f5..98a03c0f36ce3dc8a080162943619252327e5557 100644
--- a/apps/web/src/components/pullRequest/PullRequestComposer.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestComposer.tsx
@@ -131,7 +131,7 @@ export function PullRequestComposer({
               </Toggle>
             </ToggleGroup>
           ) : (
-            <PopoverTitle className="text-sm">
+            <PopoverTitle>
               {mode === "review" ? "Review pull request" : "Comment on pull request"}
             </PopoverTitle>
           )}
diff --git a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
index 9b4769109c23857a1d8fe37439831382c791b500..702584237e7034176f862dc10bb00022ca556ecb 100644
--- a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
@@ -359,7 +359,6 @@ function PullRequestLabelFilter({
             return (
               <MenuCheckboxItem
                 key={key}
-                className="grid-cols-[1rem_minmax(0,1fr)]"
                 checked={checked}
                 onCheckedChange={(next) =>
                   onChange(
diff --git a/apps/web/src/components/ui/empty.tsx b/apps/web/src/components/ui/empty.tsx
index 5390dd665620f19902e1aa782f4cf1341fea14c3..bc6f94d79a2cb340c43d9df225fa952eb036098f 100644
--- a/apps/web/src/components/ui/empty.tsx
+++ b/apps/web/src/components/ui/empty.tsx
@@ -89,7 +89,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
   return (
     <div
       className={cn(
-        "text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1",
+        "text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1 [[data-slot=empty-description]+&]:mt-1",
         className,
       )}
       data-slot="empty-description"
diff --git a/apps/web/src/components/ui/menu.tsx b/apps/web/src/components/ui/menu.tsx
index 8beed75880aeaece1a5d5856d7d31195c7f71827..131c15823d9659e90755b9185f9f9fcf76a96d72 100644
--- a/apps/web/src/components/ui/menu.tsx
+++ b/apps/web/src/components/ui/menu.tsx
@@ -117,7 +117,7 @@ function MenuItemLabel({ className, ...props }: React.ComponentProps<"span">) {
     <span
       data-slot="menu-item-label"
       className={cn(
-        "min-w-0 in-data-[density=touch]:[text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both_cap_alphabetic]:in-data-[density=touch]:py-[0.5em]",
+        "min-w-0 truncate in-data-[density=touch]:[text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both_cap_alphabetic]:in-data-[density=touch]:py-[0.5em]",
         className,
       )}
       {...props}
@@ -139,7 +139,9 @@ function MenuCheckboxItem({
       checked={checked}
       className={cn(
         "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-pointer items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        variant === "switch" ? "grid-cols-[1fr_auto] gap-4 pe-1.5" : "grid-cols-[1rem_1fr] pe-4",
+        variant === "switch"
+          ? "grid-cols-[1fr_auto] gap-4 pe-1.5"
+          : "grid-cols-[1rem_minmax(0,1fr)] pe-4",
         className,
       )}
       data-slot="menu-checkbox-item"
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index aec9ce9452b08a4b301bc9eeaf1a75fd2c558746..646f2adb9e241a790646a0aee40f9b8b3745d8b9 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -89,7 +89,7 @@ function PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {
 function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
   return (
     <PopoverPrimitive.Title
-      className={cn("font-semibold text-lg leading-none", className)}
+      className={cn("font-semibold text-sm leading-none", className)}
       data-slot="popover-title"
       {...props}
     />
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index 8c2b0680d71b2384c6ff68471acbe11fe0ee80c3..0936217f970278c1bc3d11f86f2fa6e9200ca21d 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -794,7 +794,6 @@ function UsageEnvironmentFilter({
                 key={environment.environmentId}
                 checked={checked}
                 closeOnClick={false}
-                className="grid-cols-[1rem_minmax(0,1fr)]"
                 onCheckedChange={(nextChecked) => {
                   const next = new Set(selectedEnvironments.map((entry) => entry.environmentId));
                   if (nextChecked) next.add(environment.environmentId);
diff --git a/apps/web/src/routes/_chat.index.tsx b/apps/web/src/routes/_chat.index.tsx
index 703c0312f19df5958e1fb3246bea95348960e40e..28cbbaedb7689356ab39226eb9e32995e56db994 100644
--- a/apps/web/src/routes/_chat.index.tsx
+++ b/apps/web/src/routes/_chat.index.tsx
@@ -93,8 +93,8 @@ function DraftStartError({ onRetry }: { readonly onRetry: () => void }) {
     <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none">
       <Empty className="flex-1">
         <EmptyHeader className="max-w-md">
-          <EmptyTitle className="text-foreground">Couldn’t start a new thread</EmptyTitle>
-          <EmptyDescription className="mt-2 text-muted-foreground/78">
+          <EmptyTitle>Couldn’t start a new thread</EmptyTitle>
+          <EmptyDescription>
             The project is still available. Try opening the draft again.
           </EmptyDescription>
           <div className="mt-5 flex justify-center">
@@ -139,16 +139,12 @@ function HostedStaticOnboardingState() {
               <div className="mx-auto mb-5 flex size-11 items-center justify-center rounded-xl border border-border/70 bg-background/70 text-muted-foreground">
                 <LinkIcon className="size-5" />
               </div>
-              <EmptyTitle className="text-foreground">
-                Connect to a computer running T3 Code
-              </EmptyTitle>
-              <EmptyDescription className="mt-2 leading-relaxed text-muted-foreground/78">
+              <EmptyTitle>Connect to a computer running T3 Code</EmptyTitle>
+              <EmptyDescription>
                 This app connects to T3 Code running on your computer or a server. Start the T3 Code
                 desktop app or command-line server on that machine and keep it running.
               </EmptyDescription>
-              <EmptyDescription className="mt-2 leading-relaxed text-muted-foreground/78">
-                {description}
-              </EmptyDescription>
+              <EmptyDescription>{description}</EmptyDescription>
               <div className="mt-6 flex justify-center">
                 <Button render={<Link to="/settings/connections" />} size="sm">
                   <PlusIcon className="size-4" />
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index 5f36d62c1d24e4a2f8452b0dc182fb2e95eecf23..a73c8006c8276467391b3aeda99989f61abd0118 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 = 1184;
+export const RESTYLE_CEILING = 1165;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0