fix(tui): add footer gap to simple dialogs (#56092)

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: {

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}

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) => (