refactor(web): fold repeated overrides into ui defaults

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>

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" />

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>

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>
             )}

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}

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">
             {(

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>
           )}

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(

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"

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"

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}
     />

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);

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" />

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)";