style(cli): unify footer layout to prevent extra blank lines in narrow mode

This commit is contained in:
Keith Guerin
2026-03-01 23:58:06 -08:00
parent d48c5b7206
commit 7ce6bf7b28
4 changed files with 29 additions and 59 deletions

View File

@@ -563,7 +563,7 @@ describe('Composer', () => {
const output = lastFrame();
expect(output).toContain('ToastDisplay');
expect(output).not.toContain('ApprovalModeIndicator');
expect(output).toContain('StatusDisplay');
expect(output).not.toContain('StatusDisplay');
});
it('shows ToastDisplay for other toast types', async () => {

View File

@@ -526,28 +526,20 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
{showShortcutsHelp && <ShortcutsHelp />}
{showUiDetails && (
<Box
justifyContent={
settings.merged.ui.hideContextSummary
? 'flex-start'
: 'space-between'
}
width="100%"
flexDirection={isNarrow ? 'column' : 'row'}
alignItems={isNarrow ? 'flex-start' : 'center'}
flexDirection="row"
flexWrap="wrap"
alignItems="center"
marginLeft={1}
>
<Box
marginLeft={1}
marginRight={isNarrow ? 0 : 1}
flexDirection="row"
alignItems="center"
flexGrow={1}
>
{hasToast ? (
<ToastDisplay />
) : (
{hasToast ? (
<ToastDisplay />
) : (
<>
<Box
flexDirection={isNarrow ? 'column' : 'row'}
alignItems={isNarrow ? 'flex-start' : 'center'}
flexDirection="row"
alignItems="center"
flexWrap="wrap"
>
{showApprovalIndicator && (
<ApprovalModeIndicator
@@ -558,51 +550,30 @@ export const Composer = ({ isFocused = true }: { isFocused?: boolean }) => {
{!showLoadingIndicator && (
<>
{uiState.shellModeActive && (
<Box
marginLeft={
showApprovalIndicator && !isNarrow ? 1 : 0
}
marginTop={
showApprovalIndicator && isNarrow ? 1 : 0
}
>
<Box marginLeft={1}>
<ShellModeIndicator />
</Box>
)}
{showRawMarkdownIndicator && (
<Box
marginLeft={
(showApprovalIndicator ||
uiState.shellModeActive) &&
!isNarrow
? 1
: 0
}
marginTop={
(showApprovalIndicator ||
uiState.shellModeActive) &&
isNarrow
? 1
: 0
}
>
<Box marginLeft={1}>
<RawMarkdownIndicator />
</Box>
)}
</>
)}
</Box>
)}
</Box>
<Box
flexDirection="column"
alignItems={isNarrow ? 'flex-start' : 'flex-end'}
>
{!showLoadingIndicator && (
<StatusDisplay hideContextSummary={hideContextSummary} />
)}
</Box>
{!showLoadingIndicator && (
<>
<Box marginLeft={1}>
<Text color={theme.text.secondary}>·</Text>
</Box>
<StatusDisplay
hideContextSummary={hideContextSummary}
/>
</>
)}
</>
)}
</Box>
)}
</Box>

View File

@@ -40,7 +40,7 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
skillCount === 0 &&
backgroundProcessCount === 0
) {
return <Text> </Text>; // Render an empty space to reserve height
return null;
}
const openFilesText = (() => {

View File

@@ -2,7 +2,7 @@
exports[`Composer > Snapshots > matches snapshot in idle state 1`] = `
" ShortcutsHint
ApprovalModeIndicator StatusDisplay
ApprovalModeIndicator ·StatusDisplay
InputPrompt: Type your message or @path/to/file
Footer
"
@@ -23,8 +23,7 @@ InputPrompt: Type your message or @path/to/file
exports[`Composer > Snapshots > matches snapshot in narrow view 1`] = `
"
ShortcutsHint
ApprovalModeIndicator
StatusDisplay
ApprovalModeIndicator ·StatusDisplay
InputPrompt: Type your message or
@path/to/file
Footer