authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-21 22:17:23-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-21 22:17:23-07:00
logc26119ada3565dda55bc3e86fdf47c7f9088e4b5
treed9343e445f0df60acaf24ae1e9a4831f0ab812e0
parent5a61f50cce12685f70d530aa5fdf83d9c9b065d7
signature Signed by PGP key B5690EEEBB952194

refactor(web): drop className overrides that repeat the base styles (#12984)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

19 files changed, 28 insertions(+), 28 deletions(-)

apps/web/src/components/AppSidebarLayout.tsx+1-1
...@@ -244,7 +244,7 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {...@@ -244,7 +244,7 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) {
244 side="left"244 side="left"
245 collapsible="offcanvas"245 collapsible="offcanvas"
246 data-app-sidebar=""246 data-app-sidebar=""
247 className="border-r border-sidebar-border bg-sidebar text-sidebar-foreground"247 className="border-r border-sidebar-border"
248 resizable={{248 resizable={{
249 maxWidth: sidebarMaximumWidth,249 maxWidth: sidebarMaximumWidth,
250 minWidth: THREAD_SIDEBAR_MIN_WIDTH,250 minWidth: THREAD_SIDEBAR_MIN_WIDTH,
apps/web/src/components/BranchToolbarBranchSelector.tsx+1-1
...@@ -861,7 +861,7 @@ export function BranchToolbarBranchSelector({...@@ -861,7 +861,7 @@ export function BranchToolbarBranchSelector({
861 <div className="flex min-h-0 flex-1 flex-col overflow-hidden">861 <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
862 <ComboboxEmpty>No refs found.</ComboboxEmpty>862 <ComboboxEmpty>No refs found.</ComboboxEmpty>
863 <div className="relative min-h-0 w-full max-h-56 flex-1 overflow-hidden">863 <div className="relative min-h-0 w-full max-h-56 flex-1 overflow-hidden">
864 <ComboboxListVirtualized className="size-full min-w-0 p-0">864 <ComboboxListVirtualized>
865 <LegendList<string>865 <LegendList<string>
866 ref={branchListRef}866 ref={branchListRef}
867 data={filteredBranchPickerItems}867 data={filteredBranchPickerItems}
apps/web/src/components/ConfirmDialogHost.tsx+1-1
...@@ -75,7 +75,7 @@ export function ConfirmDialogHost() {...@@ -75,7 +75,7 @@ export function ConfirmDialogHost() {
75 if (!open) completeConfirmDialogClose();75 if (!open) completeConfirmDialogClose();
76 }}76 }}
77 >77 >
78 <AlertDialogPopup className="max-w-lg">78 <AlertDialogPopup>
79 <AlertDialogHeader>79 <AlertDialogHeader>
80 <AlertDialogTitle className="wrap-anywhere">{copy.title}</AlertDialogTitle>80 <AlertDialogTitle className="wrap-anywhere">{copy.title}</AlertDialogTitle>
81 {copy.description ? (81 {copy.description ? (
apps/web/src/components/NoActiveThreadState.tsx+3-3
...@@ -5,7 +5,7 @@ import { WorkspacePageHeader } from "./WorkspacePageHeader";...@@ -5,7 +5,7 @@ import { WorkspacePageHeader } from "./WorkspacePageHeader";
55
6export function NoActiveThreadState() {6export function NoActiveThreadState() {
7 return (7 return (
8 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">8 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none">
9 <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">9 <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
10 <WorkspacePageHeader electron={isElectron} className="border-b border-border">10 <WorkspacePageHeader electron={isElectron} className="border-b border-border">
11 {isElectron ? (11 {isElectron ? (
...@@ -22,8 +22,8 @@ export function NoActiveThreadState() {...@@ -22,8 +22,8 @@ export function NoActiveThreadState() {
22 <Empty className="flex-1">22 <Empty className="flex-1">
23 <div className="w-full max-w-lg px-8 py-12">23 <div className="w-full max-w-lg px-8 py-12">
24 <EmptyHeader className="max-w-none">24 <EmptyHeader className="max-w-none">
25 <EmptyTitle className="text-foreground text-xl">Pick a thread to continue</EmptyTitle>25 <EmptyTitle className="text-foreground">Pick a thread to continue</EmptyTitle>
26 <EmptyDescription className="mt-2 text-sm text-muted-foreground/78">26 <EmptyDescription className="mt-2 text-muted-foreground/78">
27 Select an existing thread or create a new one to get started.27 Select an existing thread or create a new one to get started.
28 </EmptyDescription>28 </EmptyDescription>
29 </EmptyHeader>29 </EmptyHeader>
apps/web/src/components/NoProjectsHero.tsx+2-2
...@@ -10,7 +10,7 @@ export function NoProjectsHero() {...@@ -10,7 +10,7 @@ export function NoProjectsHero() {
10 const openAddProject = useCallback(() => openCommandPalette({ open: "add-project" }), []);10 const openAddProject = useCallback(() => openCommandPalette({ open: "add-project" }), []);
1111
12 return (12 return (
13 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">13 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none">
14 <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">14 <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
15 <Empty className="flex-1">15 <Empty className="flex-1">
16 <div className="w-full max-w-lg px-8 py-12">16 <div className="w-full max-w-lg px-8 py-12">
...@@ -18,7 +18,7 @@ export function NoProjectsHero() {...@@ -18,7 +18,7 @@ export function NoProjectsHero() {
18 <EmptyTitle className="text-foreground text-2xl sm:text-3xl">18 <EmptyTitle className="text-foreground text-2xl sm:text-3xl">
19 What should we work on?19 What should we work on?
20 </EmptyTitle>20 </EmptyTitle>
21 <EmptyDescription className="mt-2 text-sm text-muted-foreground/78">21 <EmptyDescription className="mt-2 text-muted-foreground/78">
22 Add a project to start your first thread.22 Add a project to start your first thread.
23 </EmptyDescription>23 </EmptyDescription>
24 <div className="mt-6 flex justify-center">24 <div className="mt-6 flex justify-center">
apps/web/src/components/ProjectScriptsControl.tsx+1-1
...@@ -158,7 +158,7 @@ export default function ProjectScriptsControl({...@@ -158,7 +158,7 @@ export default function ProjectScriptsControl({
158 >158 >
159 <ScriptIcon icon={fileScript.icon ?? "play"} className="size-4" />159 <ScriptIcon icon={fileScript.icon ?? "play"} className="size-4" />
160 <MenuItemLabel className="truncate">{fileScript.name}</MenuItemLabel>160 <MenuItemLabel className="truncate">{fileScript.name}</MenuItemLabel>
161 <MenuShortcut className="ms-auto">161 <MenuShortcut>
162 <DownloadIcon className="size-3.5" aria-label="Import" />162 <DownloadIcon className="size-3.5" aria-label="Import" />
163 </MenuShortcut>163 </MenuShortcut>
164 </MenuItem>164 </MenuItem>
apps/web/src/components/ThreadRouteView.tsx+1-1
...@@ -207,7 +207,7 @@ export function ThreadRouteView({ target }: { target: ThreadRouteTarget }) {...@@ -207,7 +207,7 @@ export function ThreadRouteView({ target }: { target: ThreadRouteTarget }) {
207 }207 }
208208
209 return (209 return (
210 <SidebarInset className="h-svh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground md:h-dvh">210 <SidebarInset className="h-svh min-h-0 overflow-hidden overscroll-y-none md:h-dvh">
211 {view}211 {view}
212 </SidebarInset>212 </SidebarInset>
213 );213 );
apps/web/src/components/chat/ModelPickerContent.tsx+1-1
...@@ -956,7 +956,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {...@@ -956,7 +956,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
956956
957 {/* Model list */}957 {/* Model list */}
958 <div className="relative min-h-0 flex-1 overflow-hidden pr-px">958 <div className="relative min-h-0 flex-1 overflow-hidden pr-px">
959 <ComboboxListVirtualized className="size-full min-w-0 p-0 not-empty:p-0">959 <ComboboxListVirtualized className="not-empty:p-0">
960 <LegendList<string>960 <LegendList<string>
961 ref={modelListRef}961 ref={modelListRef}
962 data={filteredItemKeys}962 data={filteredItemKeys}
apps/web/src/components/settings/FontFamilyPicker.tsx+1-1
...@@ -219,7 +219,7 @@ export function FontFamilyPicker({...@@ -219,7 +219,7 @@ export function FontFamilyPicker({
219 <div className="flex min-h-0 flex-1 flex-col overflow-hidden">219 <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
220 <ComboboxEmpty>No fonts found.</ComboboxEmpty>220 <ComboboxEmpty>No fonts found.</ComboboxEmpty>
221 <div className="relative min-h-0 max-h-72 w-full flex-1 overflow-hidden">221 <div className="relative min-h-0 max-h-72 w-full flex-1 overflow-hidden">
222 <ComboboxListVirtualized className="size-full min-w-0 p-0">222 <ComboboxListVirtualized>
223 <LegendList<string>223 <LegendList<string>
224 ref={listRef}224 ref={listRef}
225 data={items}225 data={items}
apps/web/src/components/settings/SettingsPanels.tsx+1-1
...@@ -845,7 +845,7 @@ function TokenStreamingWarningDialog({...@@ -845,7 +845,7 @@ function TokenStreamingWarningDialog({
845}) {845}) {
846 return (846 return (
847 <AlertDialog open={open} onOpenChange={onOpenChange}>847 <AlertDialog open={open} onOpenChange={onOpenChange}>
848 <AlertDialogPopup className="max-w-lg">848 <AlertDialogPopup>
849 <AlertDialogHeader>849 <AlertDialogHeader>
850 <AlertDialogTitle>Token by token is a worse experience</AlertDialogTitle>850 <AlertDialogTitle>Token by token is a worse experience</AlertDialogTitle>
851 <AlertDialogDescription>851 <AlertDialogDescription>
apps/web/src/components/settings/SettingsSidebarNav.tsx+1-1
...@@ -344,7 +344,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {...@@ -344,7 +344,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
344 )}344 )}
345 </SidebarGroup>345 </SidebarGroup>
346 </SidebarContent>346 </SidebarContent>
347 <SidebarFooter className="px-[var(--sidebar-content-inset)] py-1">347 <SidebarFooter>
348 <Suspense fallback={null}>348 <Suspense fallback={null}>
349 <T3ConnectSidebarSignIn />349 <T3ConnectSidebarSignIn />
350 </Suspense>350 </Suspense>
apps/web/src/components/sidebar/SidebarChrome.tsx+1-1
...@@ -221,7 +221,7 @@ export const SidebarUtilityMenu = memo(function SidebarUtilityMenu() {...@@ -221,7 +221,7 @@ export const SidebarUtilityMenu = memo(function SidebarUtilityMenu() {
221221
222export const SidebarChromeFooter = memo(function SidebarChromeFooter() {222export const SidebarChromeFooter = memo(function SidebarChromeFooter() {
223 return (223 return (
224 <SidebarFooter className="px-[var(--sidebar-content-inset)] py-1">224 <SidebarFooter>
225 <SidebarThreadUndoNotice />225 <SidebarThreadUndoNotice />
226 <SidebarProviderUpdatePill />226 <SidebarProviderUpdatePill />
227 <SidebarUpdateArchitectureWarning />227 <SidebarUpdateArchitectureWarning />
apps/web/src/components/ui/combobox.tsx+1-1
...@@ -247,7 +247,7 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {...@@ -247,7 +247,7 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
247function ComboboxListVirtualized({ className, ...props }: ComboboxPrimitive.List.Props) {247function ComboboxListVirtualized({ className, ...props }: ComboboxPrimitive.List.Props) {
248 return (248 return (
249 <ComboboxPrimitive.List249 <ComboboxPrimitive.List
250 className={cn("not-empty:px-1 not-empty:py-1", className)}250 className={cn("size-full min-w-0 not-empty:px-1 not-empty:py-1", className)}
251 data-slot="combobox-list"251 data-slot="combobox-list"
252 {...props}252 {...props}
253 />253 />
apps/web/src/components/ui/sidebar.tsx+1-1
...@@ -558,7 +558,7 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {...@@ -558,7 +558,7 @@ function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
558function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {558function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
559 return (559 return (
560 <div560 <div
561 className={cn("flex flex-col gap-2 p-2", className)}561 className={cn("flex flex-col gap-2 px-[var(--sidebar-content-inset)] py-1", className)}
562 data-sidebar="footer"562 data-sidebar="footer"
563 data-slot="sidebar-footer"563 data-slot="sidebar-footer"
564 {...props}564 {...props}
apps/web/src/components/usage/UsagePage.tsx+1-1
...@@ -366,7 +366,7 @@ export function UsagePage() {...@@ -366,7 +366,7 @@ export function UsagePage() {
366 );366 );
367367
368 return (368 return (
369 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">369 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none isolate">
370 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">370 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">
371 <WorkspacePageHeader electron={isElectron} className="h-auto">371 <WorkspacePageHeader electron={isElectron} className="h-auto">
372 {topbarContent}372 {topbarContent}
apps/web/src/routes/_chat.index.tsx+7-7
...@@ -90,11 +90,11 @@ function IndexDraftLanding() {...@@ -90,11 +90,11 @@ function IndexDraftLanding() {
9090
91function DraftStartError({ onRetry }: { readonly onRetry: () => void }) {91function DraftStartError({ onRetry }: { readonly onRetry: () => void }) {
92 return (92 return (
93 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">93 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none">
94 <Empty className="flex-1">94 <Empty className="flex-1">
95 <EmptyHeader className="max-w-md">95 <EmptyHeader className="max-w-md">
96 <EmptyTitle className="text-foreground text-xl">Couldn’t start a new thread</EmptyTitle>96 <EmptyTitle className="text-foreground">Couldn’t start a new thread</EmptyTitle>
97 <EmptyDescription className="mt-2 text-sm text-muted-foreground/78">97 <EmptyDescription className="mt-2 text-muted-foreground/78">
98 The project is still available. Try opening the draft again.98 The project is still available. Try opening the draft again.
99 </EmptyDescription>99 </EmptyDescription>
100 <div className="mt-5 flex justify-center">100 <div className="mt-5 flex justify-center">
...@@ -123,7 +123,7 @@ function HostedStaticOnboardingState() {...@@ -123,7 +123,7 @@ function HostedStaticOnboardingState() {
123 : "Open Connections and add that machine using its pairing link. This app must be able to reach it.";123 : "Open Connections and add that machine using its pairing link. This app must be able to reach it.";
124124
125 return (125 return (
126 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">126 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none">
127 <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">127 <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
128 <WorkspacePageHeader electron={isElectron} className="border-b border-border">128 <WorkspacePageHeader electron={isElectron} className="border-b border-border">
129 <div className="flex items-center gap-2">129 <div className="flex items-center gap-2">
...@@ -139,14 +139,14 @@ function HostedStaticOnboardingState() {...@@ -139,14 +139,14 @@ function HostedStaticOnboardingState() {
139 <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">139 <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">
140 <LinkIcon className="size-5" />140 <LinkIcon className="size-5" />
141 </div>141 </div>
142 <EmptyTitle className="text-foreground text-xl">142 <EmptyTitle className="text-foreground">
143 Connect to a computer running T3 Code143 Connect to a computer running T3 Code
144 </EmptyTitle>144 </EmptyTitle>
145 <EmptyDescription className="mt-2 text-sm leading-relaxed text-muted-foreground/78">145 <EmptyDescription className="mt-2 leading-relaxed text-muted-foreground/78">
146 This app connects to T3 Code running on your computer or a server. Start the T3 Code146 This app connects to T3 Code running on your computer or a server. Start the T3 Code
147 desktop app or command-line server on that machine and keep it running.147 desktop app or command-line server on that machine and keep it running.
148 </EmptyDescription>148 </EmptyDescription>
149 <EmptyDescription className="mt-2 text-sm leading-relaxed text-muted-foreground/78">149 <EmptyDescription className="mt-2 leading-relaxed text-muted-foreground/78">
150 {description}150 {description}
151 </EmptyDescription>151 </EmptyDescription>
152 <div className="mt-6 flex justify-center">152 <div className="mt-6 flex justify-center">
apps/web/src/routes/_chat.pull-requests.tsx+1-1
...@@ -2068,7 +2068,7 @@ function PullRequestsRouteView() {...@@ -2068,7 +2068,7 @@ function PullRequestsRouteView() {
2068 }, [keybindings]);2068 }, [keybindings]);
20692069
2070 return (2070 return (
2071 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">2071 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none">
2072 <div className="relative flex min-h-0 flex-1">2072 <div className="relative flex min-h-0 flex-1">
2073 {pullRequestsSupported && rightPanelPresent ? openPanelControls : null}2073 {pullRequestsSupported && rightPanelPresent ? openPanelControls : null}
2074 <PullRequestsColumn {...columnProps} />2074 <PullRequestsColumn {...columnProps} />
apps/web/src/routes/settings.tsx+1-1
...@@ -153,7 +153,7 @@ function SettingsContentLayout() {...@@ -153,7 +153,7 @@ function SettingsContentLayout() {
153 }, [navigateBackWithinApp]);153 }, [navigateBackWithinApp]);
154154
155 return (155 return (
156 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">156 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none isolate">
157 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">157 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">
158 <WorkspacePageHeader electron={isElectron}>158 <WorkspacePageHeader electron={isElectron}>
159 <div className="flex w-full items-center gap-3">159 <div className="flex w-full items-center gap-3">
scripts/lint-restyle-ceiling.ts+1-1
...@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";...@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
8// components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the8// components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
9// count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you9// count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
10// migrate a file, and delete this script when the rule becomes an error.10// migrate a file, and delete this script when the rule becomes an error.
11export const RESTYLE_CEILING = 1247;11export const RESTYLE_CEILING = 1214;
1212
13const RULE = "shadcn(no-restyle)";13const RULE = "shadcn(no-restyle)";
1414