From 5b009caa95d839ac3849f428fc785ee3287c8567 Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Mon, 20 Apr 2026 07:22:32 +0700
Subject: [PATCH] fix(tts): tighten Card section spacing so titles sit close to
 content

Card primitive uses `flex flex-col gap-6` which adds 24px between
header and content regardless of `pb-3` on CardHeader. Override the
flex-gap to `gap-3` on each TTS section so the section number/title
visually attaches to its body.

Affects: provider-setup, credentials-section, voice/model card on
tts-page, test-playground, behavior-section.
---
 ui/web/src/pages/tts/sections/behavior-section.tsx    | 6 +++---
 ui/web/src/pages/tts/sections/credentials-section.tsx | 4 ++--
 ui/web/src/pages/tts/sections/provider-setup.tsx      | 4 ++--
 ui/web/src/pages/tts/sections/test-playground.tsx     | 4 ++--
 ui/web/src/pages/tts/tts-page.tsx                     | 4 ++--
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ui/web/src/pages/tts/sections/behavior-section.tsx b/ui/web/src/pages/tts/sections/behavior-section.tsx
index 41dd2d7f..3e7e8879 100644
--- a/ui/web/src/pages/tts/sections/behavior-section.tsx
+++ b/ui/web/src/pages/tts/sections/behavior-section.tsx
@@ -27,8 +27,8 @@ export function BehaviorSection({ draft, onUpdate }: Props) {
   const [open, setOpen] = useState(true);
 
   return (
-    <Card>
-      <CardHeader className="pb-0">
+    <Card className="gap-3">
+      <CardHeader>
         <button
           type="button"
           className="flex w-full items-center justify-between py-1 text-left"
@@ -48,7 +48,7 @@ export function BehaviorSection({ draft, onUpdate }: Props) {
       </CardHeader>
 
       {open && (
-        <CardContent className="space-y-4 pt-4">
+        <CardContent className="space-y-4">
           {/* Auto mode */}
           <div className="grid gap-1.5">
             <Label>{t("general.autoApplyMode")}</Label>
diff --git a/ui/web/src/pages/tts/sections/credentials-section.tsx b/ui/web/src/pages/tts/sections/credentials-section.tsx
index 1d7dddf3..95ebbe89 100644
--- a/ui/web/src/pages/tts/sections/credentials-section.tsx
+++ b/ui/web/src/pages/tts/sections/credentials-section.tsx
@@ -60,8 +60,8 @@ export function CredentialsSection({ provider, draft, onUpdate, testConnection,
   };
 
   return (
-    <Card>
-      <CardHeader className="pb-3">
+    <Card className="gap-3">
+      <CardHeader>
         <CardTitle className="text-base">
           2. {t("providerSettings", { provider: t(`providers.${provider}`) })}
         </CardTitle>
diff --git a/ui/web/src/pages/tts/sections/provider-setup.tsx b/ui/web/src/pages/tts/sections/provider-setup.tsx
index 6aae3875..ff91fe2e 100644
--- a/ui/web/src/pages/tts/sections/provider-setup.tsx
+++ b/ui/web/src/pages/tts/sections/provider-setup.tsx
@@ -22,8 +22,8 @@ export function ProviderSetup({ provider, onChange }: Props) {
   const hint = provider === "edge" ? t("edge.hint") : null;
 
   return (
-    <Card>
-      <CardHeader className="pb-3">
+    <Card className="gap-3">
+      <CardHeader>
         <CardTitle className="text-base">
           1. {t("general.primaryProvider")}
         </CardTitle>
diff --git a/ui/web/src/pages/tts/sections/test-playground.tsx b/ui/web/src/pages/tts/sections/test-playground.tsx
index 5c1bcde3..861338c0 100644
--- a/ui/web/src/pages/tts/sections/test-playground.tsx
+++ b/ui/web/src/pages/tts/sections/test-playground.tsx
@@ -117,8 +117,8 @@ export function TestPlayground({ provider, voiceId, modelId, synthesize, showAud
   const canPlayNow = canPlay({ text, provider }) && !loading;
 
   return (
-    <Card>
-      <CardHeader className="pb-3">
+    <Card className="gap-3">
+      <CardHeader>
         <CardTitle className="text-base">4. {t("playground.title", "Test Playground")}</CardTitle>
       </CardHeader>
       <CardContent className="space-y-3">
diff --git a/ui/web/src/pages/tts/tts-page.tsx b/ui/web/src/pages/tts/tts-page.tsx
index fadc65bc..8d1c7564 100644
--- a/ui/web/src/pages/tts/tts-page.tsx
+++ b/ui/web/src/pages/tts/tts-page.tsx
@@ -200,8 +200,8 @@ export function TtsPage() {
       )}
 
       {draft.provider && isCredentialsSaved(draft.provider, tts) && (
-        <Card>
-          <CardHeader className="pb-3">
+        <Card className="gap-3">
+          <CardHeader>
             <CardTitle className="text-base">3. {t("voice_label")} &amp; {t("general.title", "Settings")}</CardTitle>
           </CardHeader>
           <CardContent className="space-y-4">