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() {
9494 <DialogTitle>Custom snooze</DialogTitle>
9595 <DialogDescription>Choose when snoozed threads return to your inbox.</DialogDescription>
9696 </DialogHeader>
97 <DialogPanel className="flex flex-col gap-4 text-base sm:text-sm">
97 <DialogPanel className="text-base sm:text-sm">
9898 <Tabs.Root
9999 value={mode}
100100 onValueChange={(value) => {
apps/web/src/components/GitActionsControl.tsx+1-1
......@@ -1882,7 +1882,7 @@ export default function GitActionsControl({
18821882 <DialogTitle>{COMMIT_DIALOG_TITLE}</DialogTitle>
18831883 <DialogDescription>{COMMIT_DIALOG_DESCRIPTION}</DialogDescription>
18841884 </DialogHeader>
1885 <DialogPanel className="space-y-4">
1885 <DialogPanel>
18861886 <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">
18871887 <div className="grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">
18881888 <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
25142514 : "Update the project title."}
25152515 </DialogDescription>
25162516 </DialogHeader>
2517 <DialogPanel className="space-y-4">
2517 <DialogPanel>
25182518 <div className="grid gap-1.5">
25192519 <span className="text-xs font-medium text-foreground">Project title</span>
25202520 <Input
......@@ -2561,7 +2561,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
25612561 : "Choose how this project should be grouped in the sidebar."}
25622562 </DialogDescription>
25632563 </DialogHeader>
2564 <DialogPanel className="space-y-4">
2564 <DialogPanel>
25652565 <div className="grid gap-1.5">
25662566 <span className="text-xs font-medium text-foreground">Grouping rule</span>
25672567 <Select
apps/web/src/components/PullRequestThreadDialog.tsx+1-1
......@@ -205,7 +205,7 @@ export function PullRequestThreadDialog({
205205 the draft thread in the main repo or in a dedicated worktree.
206206 </DialogDescription>
207207 </DialogHeader>
208 <DialogPanel className="space-y-4">
208 <DialogPanel>
209209 <label className="grid gap-1.5">
210210 <span className="text-xs font-medium text-foreground capitalize">
211211 {terminology.singular}
apps/web/src/components/chat/ProposedPlanCard.tsx+1-1
......@@ -223,7 +223,7 @@ export const ProposedPlanCard = memo(function ProposedPlanCard({
223223 Enter a path relative to <code>{workspaceRoot ?? "the workspace"}</code>.
224224 </DialogDescription>
225225 </DialogHeader>
226 <DialogPanel className="space-y-3">
226 <DialogPanel>
227227 <label htmlFor={savePathInputId} className="grid gap-1.5">
228228 <span className="text-xs font-medium text-foreground">Workspace path</span>
229229 <Input
apps/web/src/components/desktop/SshPasswordPromptDialog.tsx+1-1
......@@ -164,7 +164,7 @@ function ActiveSshPasswordPrompt({
164164 to the local SSH process for this connection attempt and is not saved by T3 Code.
165165 </DialogDescription>
166166 </DialogHeader>
167 <DialogPanel className="space-y-3" scrollFade={false}>
167 <DialogPanel scrollFade={false}>
168168 <form
169169 className="space-y-3"
170170 id={formId}
apps/web/src/components/pullRequest/LinkPullRequestDialog.tsx+1-1
......@@ -208,7 +208,7 @@ function LinkPullRequestDialog({
208208 this environment has a project for.
209209 </DialogDescription>
210210 </DialogHeader>
211 <DialogPanel className="space-y-3">
211 <DialogPanel>
212212 <Input
213213 ref={inputRef}
214214 placeholder="Pull request URL or #42"
apps/web/src/components/settings/BrowserImportWizard.tsx+12-8
......@@ -490,9 +490,11 @@ function ImportingStep() {
490490 <DialogTitle>Importing cookies</DialogTitle>
491491 <DialogDescription>This may take a moment.</DialogDescription>
492492 </DialogHeader>
493 <DialogPanel className="flex items-center gap-3 py-6">
494 <Spinner size="md" tone="muted" />
495 <span className="text-sm text-muted-foreground">Importing…</span>
493 <DialogPanel>
494 <div className="flex items-center gap-3 py-2">
495 <Spinner size="md" tone="muted" />
496 <span className="text-sm text-muted-foreground">Importing…</span>
497 </div>
496498 </DialogPanel>
497499 </>
498500 );
......@@ -515,11 +517,13 @@ function CheckingStep({
515517 : "Checking whether the browser has closed."}
516518 </DialogDescription>
517519 </DialogHeader>
518 <DialogPanel className="flex items-center gap-3 py-6">
519 <Spinner size="md" tone="muted" />
520 <span className="text-sm text-muted-foreground">
521 {check === "fullDiskAccess" ? "Checking access…" : "Checking…"}
522 </span>
520 <DialogPanel>
521 <div className="flex items-center gap-3 py-2">
522 <Spinner size="md" tone="muted" />
523 <span className="text-sm text-muted-foreground">
524 {check === "fullDiskAccess" ? "Checking access…" : "Checking…"}
525 </span>
526 </div>
523527 </DialogPanel>
524528 </>
525529 );
apps/web/src/components/settings/ConnectionsSettings.tsx+3-3
......@@ -828,7 +828,7 @@ const PairingLinkListRow = memo(function PairingLinkListRow({
828828 : "Clipboard copy is unavailable here. Manually copy this code into another client."}
829829 </DialogDescription>
830830 </DialogHeader>
831 <DialogPanel className="space-y-4">
831 <DialogPanel>
832832 <Textarea
833833 readOnly
834834 value={revealValue}
......@@ -1133,7 +1133,7 @@ const AuthorizedClientsHeaderAction = memo(function AuthorizedClientsHeaderActio
11331133 authorized client.
11341134 </DialogDescription>
11351135 </DialogHeader>
1136 <DialogPanel className="space-y-5">
1136 <DialogPanel>
11371137 <label className="block">
11381138 <span className="mb-1.5 block text-xs font-medium text-foreground">
11391139 Client label (optional)
......@@ -3602,7 +3602,7 @@ export function ConnectionsSettings() {
36023602 Tailscale to proxy HTTPS traffic to this backend.
36033603 </DialogDescription>
36043604 </DialogHeader>
3605 <DialogPanel className="space-y-4">
3605 <DialogPanel>
36063606 <label className="block">
36073607 <span className="text-sm font-medium text-foreground">HTTPS port</span>
36083608 <Input
apps/web/src/components/settings/DeviceHostEditor.tsx+1-1
......@@ -72,7 +72,7 @@ export function DeviceHostEditor({
7272 Hosts on the same machine are skipped.
7373 </DialogDescription>
7474 </DialogHeader>
75 <DialogPanel className="space-y-4">
75 <DialogPanel>
7676 <label className="block space-y-1.5 text-sm">
7777 <span>Name</span>
7878 <Input
apps/web/src/components/settings/ProjectIconPickerDialog.tsx+1-1
......@@ -105,7 +105,7 @@ export function ProjectIconPickerDialog({
105105 <DialogTitle>Choose project icon</DialogTitle>
106106 <DialogDescription>Choose an icon, emoji, or monogram.</DialogDescription>
107107 </DialogHeader>
108 <DialogPanel className="flex min-h-0 flex-col gap-4">
108 <DialogPanel className="flex min-h-0 flex-col">
109109 <ToggleGroup
110110 aria-label="Icon type"
111111 variant="segmented"
apps/web/src/components/settings/SettingsPanels.tsx+1-1
......@@ -899,7 +899,7 @@ function BackgroundActivityAdvancedDialog({
899899 Tune the shared power policy and the background intervals that feed it.
900900 </DialogDescription>
901901 </DialogHeader>
902 <DialogPanel className="space-y-0 px-6 pb-5">
902 <DialogPanel>
903903 <div className="overflow-hidden rounded-xl border bg-card text-card-foreground">
904904 <div className="flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
905905 <div className="min-w-0 space-y-1">
apps/web/src/components/settings/ThemeImportDialog.tsx+1-1
......@@ -427,7 +427,7 @@ export function ThemeImportDialog({
427427 <DialogHeader>
428428 <DialogTitle>Add a theme</DialogTitle>
429429 </DialogHeader>
430 <DialogPanel className="space-y-5">
430 <DialogPanel>
431431 <ThemeSearchSection
432432 onInstalled={(themes, context) => {
433433 onImportedMany(themes, context);
apps/web/src/components/ui/dialog.tsx+1-1
......@@ -171,7 +171,7 @@ function DialogPanel({
171171 <ScrollArea scrollFade={scrollFade}>
172172 <div
173173 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",
175175 className,
176176 )}
177177 data-slot="dialog-panel"
apps/web/src/components/usage/UsagePriceOverrides.tsx+1-1
......@@ -252,7 +252,7 @@ export function UsagePriceOverrides({
252252 Prices apply to all past and future usage on the environments you select.
253253 </DialogDescription>
254254 </DialogHeader>
255 <DialogPanel className="grid gap-4">
255 <DialogPanel>
256256 <div className="flex flex-wrap items-center justify-between gap-2">
257257 <div className="flex min-w-0 items-center gap-2">
258258 <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";
88// components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
99// count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
1010// migrate a file, and delete this script when the rule becomes an error.
11export const RESTYLE_CEILING = 921;
11export const RESTYLE_CEILING = 899;
1212
1313const RULE = "shadcn(no-restyle)";
1414