MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-03-10 22:21:22 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix suggestion alignment (#8233)

Browse Source
This commit is contained in:
Miguel Solorio
2025-09-10 20:47:22 -07:00
committed by GitHub
parent 03e3c59bf0
commit 8cc787f304
2 changed files with 25 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/cli/src/ui/AppContainer.tsx
View File

@@ -211,7 +211,7 @@ export const AppContainer = (props: AppContainerProps) => {
20,
Math.floor(terminalWidth * widthFraction) - 3,
);
const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 0.8));
const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 1.0));
const mainAreaWidth = Math.floor(terminalWidth * 0.9);
const staticAreaMaxItemHeight = Math.max(terminalHeight * 4, 100);

53
packages/cli/src/ui/components/SuggestionsDisplay.tsx
View File

@@ -54,6 +54,14 @@ export function SuggestionsDisplay({
);
const visibleSuggestions = suggestions.slice(startIndex, endIndex);
const getFullLabel = (s: Suggestion) =>
s.label + (s.commandKind === CommandKind.MCP_PROMPT ? ' [MCP]' : '');
const maxLabelLength = Math.max(
...suggestions.map((s) => getFullLabel(s).length),
);
const commandColumnWidth = Math.min(maxLabelLength, Math.floor(width * 0.5));
return (
<Box flexDirection="column" paddingX={1} width={width}>
{scrollOffset > 0 && <Text color={theme.text.primary}>▲</Text>}
@@ -72,36 +80,23 @@ export function SuggestionsDisplay({
);
return (
<Box key={`${suggestion.value}-${originalIndex}`} width={width}>
<Box flexDirection="row">
{(() => {
const isSlashCommand = userInput.startsWith('/');
return (
<>
{isSlashCommand ? (
<Box flexShrink={0} paddingRight={2}>
{labelElement}
{suggestion.commandKind === CommandKind.MCP_PROMPT && (
<Text color={theme.text.secondary}> [MCP]</Text>
)}
</Box>
) : (
labelElement
)}
{suggestion.description && (
<Box
flexGrow={1}
paddingLeft={isSlashCommand ? undefined : 1}
>
<Text color={textColor} wrap="truncate">
{suggestion.description}
</Text>
</Box>
)}
</>
);
})()}
<Box key={`${suggestion.value}-${originalIndex}`} flexDirection="row">
<Box width={commandColumnWidth} flexShrink={0}>
<Box>
{labelElement}
{suggestion.commandKind === CommandKind.MCP_PROMPT && (
<Text color={theme.text.secondary}> [MCP]</Text>
)}
</Box>
</Box>
{suggestion.description && (
<Box flexGrow={1} paddingLeft={3}>
<Text color={textColor} wrap="truncate">
{suggestion.description}
</Text>
</Box>
)}
</Box>
);
})}