From 9d90d892dcbfc52b47e95b2ea31b8aba877128fd Mon Sep 17 00:00:00 2001
From: Aarav Sareen <96787824+arvsrn@users.noreply.github.com>
Date: Tue, 20 Oct 2026 11:33:49 +0530
Subject: [PATCH] fix(tui): add footer gap to simple dialogs (#56092)

---
 packages/tui/src/ui/dialog-export-result.tsx | 1 +
 packages/tui/src/ui/dialog-prompt.tsx        | 1 +
 packages/tui/src/ui/dialog.tsx               | 4 +++-
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/tui/src/ui/dialog-export-result.tsx b/packages/tui/src/ui/dialog-export-result.tsx
index 6304fbdb307..d7f51b8110d 100644
--- a/packages/tui/src/ui/dialog-export-result.tsx
+++ b/packages/tui/src/ui/dialog-export-result.tsx
@@ -46,6 +46,7 @@ export function DialogExportResult(props: { path: string; onClose?: () => void }
 
   return (
     <DialogLayout
+      footerGap={2}
       header={<DialogHeader title="Session exported" onClose={close} />}
       footer={{
         actions: {
diff --git a/packages/tui/src/ui/dialog-prompt.tsx b/packages/tui/src/ui/dialog-prompt.tsx
index b85074c491e..b9a98490170 100644
--- a/packages/tui/src/ui/dialog-prompt.tsx
+++ b/packages/tui/src/ui/dialog-prompt.tsx
@@ -130,6 +130,7 @@ export function DialogPrompt(props: DialogPromptProps) {
 
   return (
     <DialogLayout
+      footerGap={2}
       header={
         <DialogHeader
           title={props.title}
diff --git a/packages/tui/src/ui/dialog.tsx b/packages/tui/src/ui/dialog.tsx
index 50505f6eaf6..3be24a30c57 100644
--- a/packages/tui/src/ui/dialog.tsx
+++ b/packages/tui/src/ui/dialog.tsx
@@ -147,6 +147,8 @@ export function DialogLayout(
     legacyFooter?: JSX.Element
     /** Side padding in cells. Defaults to DIALOG_INSET. */
     inset?: number
+    /** Blank rows between the body and the footer under the "new-designs" experiment. Defaults to 1. */
+    footerGap?: number
   }>,
 ) {
   const inset = () => props.inset ?? DIALOG_INSET
@@ -154,7 +156,7 @@ export function DialogLayout(
   return (
     <box id={props.id} paddingLeft={inset()} paddingRight={inset()} paddingBottom={1} gap={1}>
       {props.header}
-      <box>{props.children}</box>
+      <box paddingBottom={newDesigns() && props.footer ? (props.footerGap ?? 1) - 1 : 0}>{props.children}</box>
       <Show when={newDesigns() || props.legacyFooter === undefined} fallback={props.legacyFooter}>
         <Show when={props.footer}>
           {(footer) => (