abbyswag/qwen-code
1
0
Fork 0
mirror of https://github.com/QwenLM/qwen-code.git synced 2025-12-20 16:57:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: slash command completion menu column width and spacing issues (#5797)

Browse Source 
Co-authored-by: matt korwel <matt.korwel@gmail.com>
Co-authored-by: Arya Gummadi <aryagummadi@google.com>
This commit is contained in:
Neha Prasad
2025-08-23 05:21:49 +05:30
committed by GitHub
parent 53067fda74
commit 1a89d18526
1 changed files with 38 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,6 +52,21 @@ export function SuggestionsDisplay({
);
const visibleSuggestions = suggestions.slice(startIndex, endIndex);
const isSlashCommandMode = userInput.startsWith('/');
let commandNameWidth = 0;
if (isSlashCommandMode) {
const maxLabelLength = visibleSuggestions.length
? Math.max(...visibleSuggestions.map((s) => s.label.length))
: 0;
const maxAllowedWidth = Math.floor(width * 0.35);
commandNameWidth = Math.max(
15,
Math.min(maxLabelLength + 2, maxAllowedWidth),
);
}
return (
<Box flexDirection="column" paddingX={1} width={width}>
{scrollOffset > 0 && <Text color={Colors.Foreground}>▲</Text>}
@@ -72,21 +87,31 @@ export function SuggestionsDisplay({
return (
<Box key={`${suggestion.value}-${originalIndex}`} width={width}>
<Box flexDirection="row">
{userInput.startsWith('/') ? (
// only use box model for (/) command mode
<Box width={20} flexShrink={0}>
{labelElement}
</Box>
{isSlashCommandMode ? (
<>
<Box width={commandNameWidth} flexShrink={0}>
{labelElement}
</Box>
{suggestion.description ? (
<Box flexGrow={1} marginLeft={1}>
<Text color={textColor} wrap="wrap">
{suggestion.description}
</Text>
</Box>
) : null}
</>
) : (
labelElement
<>
{labelElement}
{suggestion.description ? (
<Box flexGrow={1} marginLeft={1}>
<Text color={textColor} wrap="wrap">
{suggestion.description}
</Text>
</Box>
) : null}
</>
)}
{suggestion.description ? (
<Box flexGrow={1}>
<Text color={textColor} wrap="truncate">
{suggestion.description}
</Text>
</Box>
) : null}
</Box>
</Box>
);