diff --git a/cli/src/components/choice-ad-banner.tsx b/cli/src/components/choice-ad-banner.tsx index e25bc5076..3eaaebbf7 100644 --- a/cli/src/components/choice-ad-banner.tsx +++ b/cli/src/components/choice-ad-banner.tsx @@ -14,7 +14,7 @@ interface ChoiceAdBannerProps { onImpression?: (impUrl: string) => void } -const CARD_HEIGHT = 5 // border-top + 2 lines description + spacer + cta row + border-bottom +export const CHOICE_AD_BANNER_HEIGHT = 5 // border-top + 2 lines description + spacer + cta row + border-bottom const MAX_DESC_LINES = 2 const MIN_CARD_WIDTH = 60 // Minimum width per ad card to remain readable @@ -121,7 +121,7 @@ export const ChoiceAdBanner: React.FC = ({ ads, onImpressio onMouseOut={() => setHoveredIndex(null)} style={{ width: widths[i], - height: CARD_HEIGHT, + height: CHOICE_AD_BANNER_HEIGHT, borderStyle: 'single', borderColor: isHovered ? hoverBorderColor : theme.muted, customBorderChars: BORDER_CHARS, diff --git a/cli/src/components/waiting-room-screen.tsx b/cli/src/components/waiting-room-screen.tsx index 3aa0f99d4..a87980905 100644 --- a/cli/src/components/waiting-room-screen.tsx +++ b/cli/src/components/waiting-room-screen.tsx @@ -3,7 +3,10 @@ import { useRenderer } from '@opentui/react' import React, { useMemo, useState } from 'react' import { Button } from './button' -import { ChoiceAdBanner } from './choice-ad-banner' +import { + ChoiceAdBanner, + CHOICE_AD_BANNER_HEIGHT, +} from './choice-ad-banner' import { FreebuffModelSelector } from './freebuff-model-selector' import { ShimmerText } from './shimmer-text' import { useFreebuffCtrlCExit } from '../hooks/use-freebuff-ctrl-c-exit' @@ -368,19 +371,21 @@ export const WaitingRoomScreen: React.FC = ({ - {/* Ad banner pinned to the bottom, same look-and-feel as in chat. */} - {ads && ( - + {/* Reserve the ad banner slot before the async ad fetch resolves so the + waiting-room content does not jump when the banner fills. */} + + {ads ? ( - - )} - - {/* Horizontal separator (mirrors chat input divider style) */} - {!ads && ( - - {'─'.repeat(terminalWidth)} - - )} + ) : ( + {'─'.repeat(terminalWidth)} + )} + ) }