From f3d3fe4569274c5ee6f3c5435809330bef494a2d Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 12:22:15 -0700
Subject: [PATCH] refactor(web): one vertical rhythm for dialog bodies (#13032)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 .../web/src/components/CustomSnoozeDialog.tsx |  2 +-
 apps/web/src/components/GitActionsControl.tsx |  2 +-
 apps/web/src/components/LegacySidebar.tsx     |  4 ++--
 .../components/PullRequestThreadDialog.tsx    |  2 +-
 .../src/components/chat/ProposedPlanCard.tsx  |  2 +-
 .../desktop/SshPasswordPromptDialog.tsx       |  2 +-
 .../pullRequest/LinkPullRequestDialog.tsx     |  2 +-
 .../settings/BrowserImportWizard.tsx          | 20 +++++++++++--------
 .../settings/ConnectionsSettings.tsx          |  6 +++---
 .../components/settings/DeviceHostEditor.tsx  |  2 +-
 .../settings/ProjectIconPickerDialog.tsx      |  2 +-
 .../components/settings/SettingsPanels.tsx    |  2 +-
 .../components/settings/ThemeImportDialog.tsx |  2 +-
 apps/web/src/components/ui/dialog.tsx         |  2 +-
 .../components/usage/UsagePriceOverrides.tsx  |  2 +-
 scripts/lint-restyle-ceiling.ts               |  2 +-
 16 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/components/CustomSnoozeDialog.tsx b/apps/web/src/components/CustomSnoozeDialog.tsx
index 453efb1cbe5367d132a8fa006158843e4805ecb8..729200c907b04b1f60e43a2c608b82a55fba8fc6 100644
--- a/apps/web/src/components/CustomSnoozeDialog.tsx
+++ b/apps/web/src/components/CustomSnoozeDialog.tsx
@@ -94,7 +94,7 @@ function CustomSnoozeDialog() {
             <DialogTitle>Custom snooze</DialogTitle>
             <DialogDescription>Choose when snoozed threads return to your inbox.</DialogDescription>
           </DialogHeader>
-          <DialogPanel className="flex flex-col gap-4 text-base sm:text-sm">
+          <DialogPanel className="text-base sm:text-sm">
             <Tabs.Root
               value={mode}
               onValueChange={(value) => {
diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx
index c849532dafdba801c7aad5aa62e2366b50e9e06e..841adf2fcbb3d7ae9be4bf6471dc2654862038f6 100644
--- a/apps/web/src/components/GitActionsControl.tsx
+++ b/apps/web/src/components/GitActionsControl.tsx
@@ -1882,7 +1882,7 @@ export default function GitActionsControl({
             <DialogTitle>{COMMIT_DIALOG_TITLE}</DialogTitle>
             <DialogDescription>{COMMIT_DIALOG_DESCRIPTION}</DialogDescription>
           </DialogHeader>
-          <DialogPanel className="space-y-4">
+          <DialogPanel>
             <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">
               <div className="grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">
                 <span className="text-muted-foreground">Branch</span>
diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index b98f3a30ed261880d3d9c3b73b6030d9df27baa9..5e60b9b0df7e0c5edd9c626e97b08662a5c67af9 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -2514,7 +2514,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
                 : "Update the project title."}
             </DialogDescription>
           </DialogHeader>
-          <DialogPanel className="space-y-4">
+          <DialogPanel>
             <div className="grid gap-1.5">
               <span className="text-xs font-medium text-foreground">Project title</span>
               <Input
@@ -2561,7 +2561,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
                 : "Choose how this project should be grouped in the sidebar."}
             </DialogDescription>
           </DialogHeader>
-          <DialogPanel className="space-y-4">
+          <DialogPanel>
             <div className="grid gap-1.5">
               <span className="text-xs font-medium text-foreground">Grouping rule</span>
               <Select
diff --git a/apps/web/src/components/PullRequestThreadDialog.tsx b/apps/web/src/components/PullRequestThreadDialog.tsx
index 0cc1a84d784836fa36e277a34ff59aada3f673b8..1b4a73dcffd4d29a5b8f7cd81dab7b87404a7744 100644
--- a/apps/web/src/components/PullRequestThreadDialog.tsx
+++ b/apps/web/src/components/PullRequestThreadDialog.tsx
@@ -205,7 +205,7 @@ export function PullRequestThreadDialog({
             the draft thread in the main repo or in a dedicated worktree.
           </DialogDescription>
         </DialogHeader>
-        <DialogPanel className="space-y-4">
+        <DialogPanel>
           <label className="grid gap-1.5">
             <span className="text-xs font-medium text-foreground capitalize">
               {terminology.singular}
diff --git a/apps/web/src/components/chat/ProposedPlanCard.tsx b/apps/web/src/components/chat/ProposedPlanCard.tsx
index 9fcfaf4d17440188221cc7aa8d3e89175c6eddcb..6639729e7bd9679afe4411c4d4b47211d2256200 100644
--- a/apps/web/src/components/chat/ProposedPlanCard.tsx
+++ b/apps/web/src/components/chat/ProposedPlanCard.tsx
@@ -223,7 +223,7 @@ export const ProposedPlanCard = memo(function ProposedPlanCard({
               Enter a path relative to <code>{workspaceRoot ?? "the workspace"}</code>.
             </DialogDescription>
           </DialogHeader>
-          <DialogPanel className="space-y-3">
+          <DialogPanel>
             <label htmlFor={savePathInputId} className="grid gap-1.5">
               <span className="text-xs font-medium text-foreground">Workspace path</span>
               <Input
diff --git a/apps/web/src/components/desktop/SshPasswordPromptDialog.tsx b/apps/web/src/components/desktop/SshPasswordPromptDialog.tsx
index a6ff9d8c4ec6b519bcbdd302ad69f5e076f24449..d3727ae210bdfed516f7fe46e14c77cd92bca566 100644
--- a/apps/web/src/components/desktop/SshPasswordPromptDialog.tsx
+++ b/apps/web/src/components/desktop/SshPasswordPromptDialog.tsx
@@ -164,7 +164,7 @@ function ActiveSshPasswordPrompt({
             to the local SSH process for this connection attempt and is not saved by T3 Code.
           </DialogDescription>
         </DialogHeader>
-        <DialogPanel className="space-y-3" scrollFade={false}>
+        <DialogPanel scrollFade={false}>
           <form
             className="space-y-3"
             id={formId}
diff --git a/apps/web/src/components/pullRequest/LinkPullRequestDialog.tsx b/apps/web/src/components/pullRequest/LinkPullRequestDialog.tsx
index 88e8144eed0b003d26cc75fe92662aaef6b8eb17..0b4a3a6e76396b6680f20b29af8333a5bdbbfdf9 100644
--- a/apps/web/src/components/pullRequest/LinkPullRequestDialog.tsx
+++ b/apps/web/src/components/pullRequest/LinkPullRequestDialog.tsx
@@ -208,7 +208,7 @@ function LinkPullRequestDialog({
             this environment has a project for.
           </DialogDescription>
         </DialogHeader>
-        <DialogPanel className="space-y-3">
+        <DialogPanel>
           <Input
             ref={inputRef}
             placeholder="Pull request URL or #42"
diff --git a/apps/web/src/components/settings/BrowserImportWizard.tsx b/apps/web/src/components/settings/BrowserImportWizard.tsx
index 81d1f480d8d09c1bcbe74beb98a5ad0fd0fd7093..afa9acd0c124d7c11097d8b70249ec7460165071 100644
--- a/apps/web/src/components/settings/BrowserImportWizard.tsx
+++ b/apps/web/src/components/settings/BrowserImportWizard.tsx
@@ -490,9 +490,11 @@ function ImportingStep() {
         <DialogTitle>Importing cookies</DialogTitle>
         <DialogDescription>This may take a moment.</DialogDescription>
       </DialogHeader>
-      <DialogPanel className="flex items-center gap-3 py-6">
-        <Spinner size="md" tone="muted" />
-        <span className="text-sm text-muted-foreground">Importing…</span>
+      <DialogPanel>
+        <div className="flex items-center gap-3 py-2">
+          <Spinner size="md" tone="muted" />
+          <span className="text-sm text-muted-foreground">Importing…</span>
+        </div>
       </DialogPanel>
     </>
   );
@@ -515,11 +517,13 @@ function CheckingStep({
             : "Checking whether the browser has closed."}
         </DialogDescription>
       </DialogHeader>
-      <DialogPanel className="flex items-center gap-3 py-6">
-        <Spinner size="md" tone="muted" />
-        <span className="text-sm text-muted-foreground">
-          {check === "fullDiskAccess" ? "Checking access…" : "Checking…"}
-        </span>
+      <DialogPanel>
+        <div className="flex items-center gap-3 py-2">
+          <Spinner size="md" tone="muted" />
+          <span className="text-sm text-muted-foreground">
+            {check === "fullDiskAccess" ? "Checking access…" : "Checking…"}
+          </span>
+        </div>
       </DialogPanel>
     </>
   );
diff --git a/apps/web/src/components/settings/ConnectionsSettings.tsx b/apps/web/src/components/settings/ConnectionsSettings.tsx
index 0e2213039cc9e9299f80522221bf45d06a2951c3..81040f84c9e4a99f35a3a15f9d7128d7511f4825 100644
--- a/apps/web/src/components/settings/ConnectionsSettings.tsx
+++ b/apps/web/src/components/settings/ConnectionsSettings.tsx
@@ -828,7 +828,7 @@ const PairingLinkListRow = memo(function PairingLinkListRow({
                     : "Clipboard copy is unavailable here. Manually copy this code into another client."}
                 </DialogDescription>
               </DialogHeader>
-              <DialogPanel className="space-y-4">
+              <DialogPanel>
                 <Textarea
                   readOnly
                   value={revealValue}
@@ -1133,7 +1133,7 @@ const AuthorizedClientsHeaderAction = memo(function AuthorizedClientsHeaderActio
               authorized client.
             </DialogDescription>
           </DialogHeader>
-          <DialogPanel className="space-y-5">
+          <DialogPanel>
             <label className="block">
               <span className="mb-1.5 block text-xs font-medium text-foreground">
                 Client label (optional)
@@ -3602,7 +3602,7 @@ export function ConnectionsSettings() {
                   Tailscale to proxy HTTPS traffic to this backend.
                 </DialogDescription>
               </DialogHeader>
-              <DialogPanel className="space-y-4">
+              <DialogPanel>
                 <label className="block">
                   <span className="text-sm font-medium text-foreground">HTTPS port</span>
                   <Input
diff --git a/apps/web/src/components/settings/DeviceHostEditor.tsx b/apps/web/src/components/settings/DeviceHostEditor.tsx
index 926f404be2e9a107ba902d51c2d8ce5f4dfcdf5e..263ee1779ea1754afc17fabccc06e7d8014924f8 100644
--- a/apps/web/src/components/settings/DeviceHostEditor.tsx
+++ b/apps/web/src/components/settings/DeviceHostEditor.tsx
@@ -72,7 +72,7 @@ export function DeviceHostEditor({
             Hosts on the same machine are skipped.
           </DialogDescription>
         </DialogHeader>
-        <DialogPanel className="space-y-4">
+        <DialogPanel>
           <label className="block space-y-1.5 text-sm">
             <span>Name</span>
             <Input
diff --git a/apps/web/src/components/settings/ProjectIconPickerDialog.tsx b/apps/web/src/components/settings/ProjectIconPickerDialog.tsx
index f2474e531c07e4328a842087e2a0e549b8aa16f4..d9c48c036efb040b1737c7b18c5d2dd3aa67771c 100644
--- a/apps/web/src/components/settings/ProjectIconPickerDialog.tsx
+++ b/apps/web/src/components/settings/ProjectIconPickerDialog.tsx
@@ -105,7 +105,7 @@ export function ProjectIconPickerDialog({
           <DialogTitle>Choose project icon</DialogTitle>
           <DialogDescription>Choose an icon, emoji, or monogram.</DialogDescription>
         </DialogHeader>
-        <DialogPanel className="flex min-h-0 flex-col gap-4">
+        <DialogPanel className="flex min-h-0 flex-col">
           <ToggleGroup
             aria-label="Icon type"
             variant="segmented"
diff --git a/apps/web/src/components/settings/SettingsPanels.tsx b/apps/web/src/components/settings/SettingsPanels.tsx
index 6ea08076ad885d5236bc39e6a40e5dc6074ba055..6aeeb269f5a093e4035e6f2fb4f5af47542bdeb1 100644
--- a/apps/web/src/components/settings/SettingsPanels.tsx
+++ b/apps/web/src/components/settings/SettingsPanels.tsx
@@ -899,7 +899,7 @@ function BackgroundActivityAdvancedDialog({
             Tune the shared power policy and the background intervals that feed it.
           </DialogDescription>
         </DialogHeader>
-        <DialogPanel className="space-y-0 px-6 pb-5">
+        <DialogPanel>
           <div className="overflow-hidden rounded-xl border bg-card text-card-foreground">
             <div className="flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
               <div className="min-w-0 space-y-1">
diff --git a/apps/web/src/components/settings/ThemeImportDialog.tsx b/apps/web/src/components/settings/ThemeImportDialog.tsx
index 891294960028daa7b1f50297e4043320e7f6ed87..b17e19feaaec08760fde79557dc5afa3ea56ac22 100644
--- a/apps/web/src/components/settings/ThemeImportDialog.tsx
+++ b/apps/web/src/components/settings/ThemeImportDialog.tsx
@@ -427,7 +427,7 @@ export function ThemeImportDialog({
         <DialogHeader>
           <DialogTitle>Add a theme</DialogTitle>
         </DialogHeader>
-        <DialogPanel className="space-y-5">
+        <DialogPanel>
           <ThemeSearchSection
             onInstalled={(themes, context) => {
               onImportedMany(themes, context);
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index db1b6e35b80f171dc13544fa0e83318d50f19be2..1724d843c56951a3e6fd45ca37d640b118af756b 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -171,7 +171,7 @@ function DialogPanel({
     <ScrollArea scrollFade={scrollFade}>
       <div
         className={cn(
-          "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",
+          "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",
           className,
         )}
         data-slot="dialog-panel"
diff --git a/apps/web/src/components/usage/UsagePriceOverrides.tsx b/apps/web/src/components/usage/UsagePriceOverrides.tsx
index 6007de4c2fe6513145db446fb3af2b3964f9c1f8..1fdeb67ae9b4b80a0e0d294b2663e8b2bff97ce9 100644
--- a/apps/web/src/components/usage/UsagePriceOverrides.tsx
+++ b/apps/web/src/components/usage/UsagePriceOverrides.tsx
@@ -252,7 +252,7 @@ export function UsagePriceOverrides({
             Prices apply to all past and future usage on the environments you select.
           </DialogDescription>
         </DialogHeader>
-        <DialogPanel className="grid gap-4">
+        <DialogPanel>
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div className="flex min-w-0 items-center gap-2">
               <Label id="usage-prices-apply-label" className="shrink-0">
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index a0743a16763130a90f33dd35e2b7372eea2fb67e..8940a53e5899c09c1f90c8a424b1d6e8f920be28 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 = 921;
+export const RESTYLE_CEILING = 899;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0