authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-22 12:22:15-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-22 12:22:15-07:00
logf3d3fe4569274c5ee6f3c5435809330bef494a2d
treefe149d390e95a8f7e3154444916cb99ea5a36e91
parentaa2b25d29b4b13ef1c2ee80e1afade1635de9ca8
signature Signed by PGP key B5690EEEBB952194

refactor(web): one vertical rhythm for dialog bodies (#13032)

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

16 files changed, 30 insertions(+), 26 deletions(-)

apps/web/src/components/CustomSnoozeDialog.tsx+1-1
...@@ -94,7 +94,7 @@ function CustomSnoozeDialog() {...@@ -94,7 +94,7 @@ function CustomSnoozeDialog() {
94 <DialogTitle>Custom snooze</DialogTitle>94 <DialogTitle>Custom snooze</DialogTitle>
95 <DialogDescription>Choose when snoozed threads return to your inbox.</DialogDescription>95 <DialogDescription>Choose when snoozed threads return to your inbox.</DialogDescription>
96 </DialogHeader>96 </DialogHeader>
97 <DialogPanel className="flex flex-col gap-4 text-base sm:text-sm">97 <DialogPanel className="text-base sm:text-sm">
98 <Tabs.Root98 <Tabs.Root
99 value={mode}99 value={mode}
100 onValueChange={(value) => {100 onValueChange={(value) => {
apps/web/src/components/GitActionsControl.tsx+1-1
...@@ -1882,7 +1882,7 @@ export default function GitActionsControl({...@@ -1882,7 +1882,7 @@ export default function GitActionsControl({
1882 <DialogTitle>{COMMIT_DIALOG_TITLE}</DialogTitle>1882 <DialogTitle>{COMMIT_DIALOG_TITLE}</DialogTitle>
1883 <DialogDescription>{COMMIT_DIALOG_DESCRIPTION}</DialogDescription>1883 <DialogDescription>{COMMIT_DIALOG_DESCRIPTION}</DialogDescription>
1884 </DialogHeader>1884 </DialogHeader>
1885 <DialogPanel className="space-y-4">1885 <DialogPanel>
1886 <div className="space-y-3 rounded-xl bg-zinc-25 p-3 text-sm ring-1 ring-black/5 dark:bg-white/[0.035] dark:ring-white/5">1886 <div className="space-y-3 rounded-xl bg-zinc-25 p-3 text-sm ring-1 ring-black/5 dark:bg-white/[0.035] dark:ring-white/5">
1887 <div className="grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">1887 <div className="grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">
1888 <span className="text-muted-foreground">Branch</span>1888 <span className="text-muted-foreground">Branch</span>
apps/web/src/components/LegacySidebar.tsx+2-2
...@@ -2514,7 +2514,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec...@@ -2514,7 +2514,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
2514 : "Update the project title."}2514 : "Update the project title."}
2515 </DialogDescription>2515 </DialogDescription>
2516 </DialogHeader>2516 </DialogHeader>
2517 <DialogPanel className="space-y-4">2517 <DialogPanel>
2518 <div className="grid gap-1.5">2518 <div className="grid gap-1.5">
2519 <span className="text-xs font-medium text-foreground">Project title</span>2519 <span className="text-xs font-medium text-foreground">Project title</span>
2520 <Input2520 <Input
...@@ -2561,7 +2561,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec...@@ -2561,7 +2561,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
2561 : "Choose how this project should be grouped in the sidebar."}2561 : "Choose how this project should be grouped in the sidebar."}
2562 </DialogDescription>2562 </DialogDescription>
2563 </DialogHeader>2563 </DialogHeader>
2564 <DialogPanel className="space-y-4">2564 <DialogPanel>
2565 <div className="grid gap-1.5">2565 <div className="grid gap-1.5">
2566 <span className="text-xs font-medium text-foreground">Grouping rule</span>2566 <span className="text-xs font-medium text-foreground">Grouping rule</span>
2567 <Select2567 <Select
apps/web/src/components/PullRequestThreadDialog.tsx+1-1
...@@ -205,7 +205,7 @@ export function PullRequestThreadDialog({...@@ -205,7 +205,7 @@ export function PullRequestThreadDialog({
205 the draft thread in the main repo or in a dedicated worktree.205 the draft thread in the main repo or in a dedicated worktree.
206 </DialogDescription>206 </DialogDescription>
207 </DialogHeader>207 </DialogHeader>
208 <DialogPanel className="space-y-4">208 <DialogPanel>
209 <label className="grid gap-1.5">209 <label className="grid gap-1.5">
210 <span className="text-xs font-medium text-foreground capitalize">210 <span className="text-xs font-medium text-foreground capitalize">
211 {terminology.singular}211 {terminology.singular}
apps/web/src/components/chat/ProposedPlanCard.tsx+1-1
...@@ -223,7 +223,7 @@ export const ProposedPlanCard = memo(function ProposedPlanCard({...@@ -223,7 +223,7 @@ export const ProposedPlanCard = memo(function ProposedPlanCard({
223 Enter a path relative to <code>{workspaceRoot ?? "the workspace"}</code>.223 Enter a path relative to <code>{workspaceRoot ?? "the workspace"}</code>.
224 </DialogDescription>224 </DialogDescription>
225 </DialogHeader>225 </DialogHeader>
226 <DialogPanel className="space-y-3">226 <DialogPanel>
227 <label htmlFor={savePathInputId} className="grid gap-1.5">227 <label htmlFor={savePathInputId} className="grid gap-1.5">
228 <span className="text-xs font-medium text-foreground">Workspace path</span>228 <span className="text-xs font-medium text-foreground">Workspace path</span>
229 <Input229 <Input
apps/web/src/components/desktop/SshPasswordPromptDialog.tsx+1-1
...@@ -164,7 +164,7 @@ function ActiveSshPasswordPrompt({...@@ -164,7 +164,7 @@ function ActiveSshPasswordPrompt({
164 to the local SSH process for this connection attempt and is not saved by T3 Code.164 to the local SSH process for this connection attempt and is not saved by T3 Code.
165 </DialogDescription>165 </DialogDescription>
166 </DialogHeader>166 </DialogHeader>
167 <DialogPanel className="space-y-3" scrollFade={false}>167 <DialogPanel scrollFade={false}>
168 <form168 <form
169 className="space-y-3"169 className="space-y-3"
170 id={formId}170 id={formId}
apps/web/src/components/pullRequest/LinkPullRequestDialog.tsx+1-1
...@@ -208,7 +208,7 @@ function LinkPullRequestDialog({...@@ -208,7 +208,7 @@ function LinkPullRequestDialog({
208 this environment has a project for.208 this environment has a project for.
209 </DialogDescription>209 </DialogDescription>
210 </DialogHeader>210 </DialogHeader>
211 <DialogPanel className="space-y-3">211 <DialogPanel>
212 <Input212 <Input
213 ref={inputRef}213 ref={inputRef}
214 placeholder="Pull request URL or #42"214 placeholder="Pull request URL or #42"
apps/web/src/components/settings/BrowserImportWizard.tsx+12-8
...@@ -490,9 +490,11 @@ function ImportingStep() {...@@ -490,9 +490,11 @@ function ImportingStep() {
490 <DialogTitle>Importing cookies</DialogTitle>490 <DialogTitle>Importing cookies</DialogTitle>
491 <DialogDescription>This may take a moment.</DialogDescription>491 <DialogDescription>This may take a moment.</DialogDescription>
492 </DialogHeader>492 </DialogHeader>
493 <DialogPanel className="flex items-center gap-3 py-6">493 <DialogPanel>
494 <Spinner size="md" tone="muted" />494 <div className="flex items-center gap-3 py-2">
495 <span className="text-sm text-muted-foreground">Importing…</span>495 <Spinner size="md" tone="muted" />
496 <span className="text-sm text-muted-foreground">Importing…</span>
497 </div>
496 </DialogPanel>498 </DialogPanel>
497 </>499 </>
498 );500 );
...@@ -515,11 +517,13 @@ function CheckingStep({...@@ -515,11 +517,13 @@ function CheckingStep({
515 : "Checking whether the browser has closed."}517 : "Checking whether the browser has closed."}
516 </DialogDescription>518 </DialogDescription>
517 </DialogHeader>519 </DialogHeader>
518 <DialogPanel className="flex items-center gap-3 py-6">520 <DialogPanel>
519 <Spinner size="md" tone="muted" />521 <div className="flex items-center gap-3 py-2">
520 <span className="text-sm text-muted-foreground">522 <Spinner size="md" tone="muted" />
521 {check === "fullDiskAccess" ? "Checking access…" : "Checking…"}523 <span className="text-sm text-muted-foreground">
522 </span>524 {check === "fullDiskAccess" ? "Checking access…" : "Checking…"}
525 </span>
526 </div>
523 </DialogPanel>527 </DialogPanel>
524 </>528 </>
525 );529 );
apps/web/src/components/settings/ConnectionsSettings.tsx+3-3
...@@ -828,7 +828,7 @@ const PairingLinkListRow = memo(function PairingLinkListRow({...@@ -828,7 +828,7 @@ const PairingLinkListRow = memo(function PairingLinkListRow({
828 : "Clipboard copy is unavailable here. Manually copy this code into another client."}828 : "Clipboard copy is unavailable here. Manually copy this code into another client."}
829 </DialogDescription>829 </DialogDescription>
830 </DialogHeader>830 </DialogHeader>
831 <DialogPanel className="space-y-4">831 <DialogPanel>
832 <Textarea832 <Textarea
833 readOnly833 readOnly
834 value={revealValue}834 value={revealValue}
...@@ -1133,7 +1133,7 @@ const AuthorizedClientsHeaderAction = memo(function AuthorizedClientsHeaderActio...@@ -1133,7 +1133,7 @@ const AuthorizedClientsHeaderAction = memo(function AuthorizedClientsHeaderActio
1133 authorized client.1133 authorized client.
1134 </DialogDescription>1134 </DialogDescription>
1135 </DialogHeader>1135 </DialogHeader>
1136 <DialogPanel className="space-y-5">1136 <DialogPanel>
1137 <label className="block">1137 <label className="block">
1138 <span className="mb-1.5 block text-xs font-medium text-foreground">1138 <span className="mb-1.5 block text-xs font-medium text-foreground">
1139 Client label (optional)1139 Client label (optional)
...@@ -3602,7 +3602,7 @@ export function ConnectionsSettings() {...@@ -3602,7 +3602,7 @@ export function ConnectionsSettings() {
3602 Tailscale to proxy HTTPS traffic to this backend.3602 Tailscale to proxy HTTPS traffic to this backend.
3603 </DialogDescription>3603 </DialogDescription>
3604 </DialogHeader>3604 </DialogHeader>
3605 <DialogPanel className="space-y-4">3605 <DialogPanel>
3606 <label className="block">3606 <label className="block">
3607 <span className="text-sm font-medium text-foreground">HTTPS port</span>3607 <span className="text-sm font-medium text-foreground">HTTPS port</span>
3608 <Input3608 <Input
apps/web/src/components/settings/DeviceHostEditor.tsx+1-1
...@@ -72,7 +72,7 @@ export function DeviceHostEditor({...@@ -72,7 +72,7 @@ export function DeviceHostEditor({
72 Hosts on the same machine are skipped.72 Hosts on the same machine are skipped.
73 </DialogDescription>73 </DialogDescription>
74 </DialogHeader>74 </DialogHeader>
75 <DialogPanel className="space-y-4">75 <DialogPanel>
76 <label className="block space-y-1.5 text-sm">76 <label className="block space-y-1.5 text-sm">
77 <span>Name</span>77 <span>Name</span>
78 <Input78 <Input
apps/web/src/components/settings/ProjectIconPickerDialog.tsx+1-1
...@@ -105,7 +105,7 @@ export function ProjectIconPickerDialog({...@@ -105,7 +105,7 @@ export function ProjectIconPickerDialog({
105 <DialogTitle>Choose project icon</DialogTitle>105 <DialogTitle>Choose project icon</DialogTitle>
106 <DialogDescription>Choose an icon, emoji, or monogram.</DialogDescription>106 <DialogDescription>Choose an icon, emoji, or monogram.</DialogDescription>
107 </DialogHeader>107 </DialogHeader>
108 <DialogPanel className="flex min-h-0 flex-col gap-4">108 <DialogPanel className="flex min-h-0 flex-col">
109 <ToggleGroup109 <ToggleGroup
110 aria-label="Icon type"110 aria-label="Icon type"
111 variant="segmented"111 variant="segmented"
apps/web/src/components/settings/SettingsPanels.tsx+1-1
...@@ -899,7 +899,7 @@ function BackgroundActivityAdvancedDialog({...@@ -899,7 +899,7 @@ function BackgroundActivityAdvancedDialog({
899 Tune the shared power policy and the background intervals that feed it.899 Tune the shared power policy and the background intervals that feed it.
900 </DialogDescription>900 </DialogDescription>
901 </DialogHeader>901 </DialogHeader>
902 <DialogPanel className="space-y-0 px-6 pb-5">902 <DialogPanel>
903 <div className="overflow-hidden rounded-xl border bg-card text-card-foreground">903 <div className="overflow-hidden rounded-xl border bg-card text-card-foreground">
904 <div className="flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-between">904 <div className="flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
905 <div className="min-w-0 space-y-1">905 <div className="min-w-0 space-y-1">
apps/web/src/components/settings/ThemeImportDialog.tsx+1-1
...@@ -427,7 +427,7 @@ export function ThemeImportDialog({...@@ -427,7 +427,7 @@ export function ThemeImportDialog({
427 <DialogHeader>427 <DialogHeader>
428 <DialogTitle>Add a theme</DialogTitle>428 <DialogTitle>Add a theme</DialogTitle>
429 </DialogHeader>429 </DialogHeader>
430 <DialogPanel className="space-y-5">430 <DialogPanel>
431 <ThemeSearchSection431 <ThemeSearchSection
432 onInstalled={(themes, context) => {432 onInstalled={(themes, context) => {
433 onImportedMany(themes, context);433 onImportedMany(themes, context);
apps/web/src/components/ui/dialog.tsx+1-1
...@@ -171,7 +171,7 @@ function DialogPanel({...@@ -171,7 +171,7 @@ function DialogPanel({
171 <ScrollArea scrollFade={scrollFade}>171 <ScrollArea scrollFade={scrollFade}>
172 <div172 <div
173 className={cn(173 className={cn(
174 "p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1",174 "space-y-4 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1",
175 className,175 className,
176 )}176 )}
177 data-slot="dialog-panel"177 data-slot="dialog-panel"
apps/web/src/components/usage/UsagePriceOverrides.tsx+1-1
...@@ -252,7 +252,7 @@ export function UsagePriceOverrides({...@@ -252,7 +252,7 @@ export function UsagePriceOverrides({
252 Prices apply to all past and future usage on the environments you select.252 Prices apply to all past and future usage on the environments you select.
253 </DialogDescription>253 </DialogDescription>
254 </DialogHeader>254 </DialogHeader>
255 <DialogPanel className="grid gap-4">255 <DialogPanel>
256 <div className="flex flex-wrap items-center justify-between gap-2">256 <div className="flex flex-wrap items-center justify-between gap-2">
257 <div className="flex min-w-0 items-center gap-2">257 <div className="flex min-w-0 items-center gap-2">
258 <Label id="usage-prices-apply-label" className="shrink-0">258 <Label id="usage-prices-apply-label" className="shrink-0">
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 = 921;11export const RESTYLE_CEILING = 899;
1212
13const RULE = "shadcn(no-restyle)";13const RULE = "shadcn(no-restyle)";
1414