fix(ui): Fix command suggestion text wrapping with dynamic width alignment

[dracic]

Fix command suggestion text wrapping with dynamic width alignment

Replaces hardcoded 20-character width constraint with dynamic width calculation in slash command suggestions. Commands no longer wrap to multiple lines, and descriptions align perfectly regardless of command name length. Implements intelligent spacing with 4-character padding for optimal readability. Now with custom commands and possibility to create deep hierarchies of commands, readability is important.

Key Change: SuggestionsDisplay.tsx now calculates optimal width based on the longest visible command name + 4 characters padding, ensuring consistent alignment for mixed short/long commands.

Dive Deeper

Problem Solved

The original implementation had a hardcoded width={20} constraint for slash command suggestions, causing long command names like "BMad:analyst:facilitate-brainstorming-session" to wrap to multiple lines, creating poor UX and readability issues.

Solution Approach

Instead of simply removing the width constraint (which would eliminate spacing between commands and descriptions), we implemented a dynamic width calculation:

 const maxLabelWidth = userInput.startsWith('/') 
    ? visibleSuggestions.length > 0 
      ? Math.max(...visibleSuggestions.map(s => s.label.length)) + 4 // Add 4 characters padding
      : 0 // Explicitly handle empty array case to prevent -Infinity
    : 0;

Technical Benefits

1. Perfect Alignment: All command descriptions start at the same column position
2. Performance Optimized: Only calculates width for visible suggestions (≤8 items)
3. Backwards Compatible: Non-slash commands remain unchanged
4. Edge Case Safe: Prevents runtime errors on empty suggestion arrays
5. Maintainable: Self-adjusting based on actual command lengths

Before vs After

Before:

After:

Reviewer Test Plan

Just type commands and custom commands with different lengths.

Testing Matrix

	🍏	🪟	🐧
npm run	✅	✅	❓
npx	❓	❓	❓
Docker	❓	❓	❓
Podman	❓	-	-
Seatbelt	❓	-	-

Test Results:

• ✅ Windows: All 59 InputPrompt tests passing
• ✅ Build successful with no TypeScript errors
• ✅ QA approved with "Excellent Implementation" rating

Linked issues / bugs

This PR solves #5039

[gemini-code-assist]

Summary of Changes

Hello @dracic, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience of the command suggestion UI by implementing a dynamic width calculation for command labels. This change resolves a long-standing issue where lengthy command names would wrap onto multiple lines, leading to poor readability and misaligned descriptions. The new approach ensures that all command descriptions align perfectly, improving clarity and visual consistency for users interacting with slash commands.

Highlights

• Dynamic Width Calculation: Implemented a dynamic calculation for the width of command labels in SuggestionsDisplay.tsx based on the longest visible command name, plus a 4-character padding.
• Improved UI Alignment: Replaced a hardcoded 20-character width constraint with the dynamically calculated width, ensuring command descriptions align perfectly regardless of command name length and preventing text wrapping.
• Performance and Robustness: The width calculation is optimized to only consider visible suggestions (up to 8 items), is backwards compatible for non-slash commands, and handles empty suggestion arrays safely.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a dynamic width calculation for slash command suggestions, which is a great improvement for readability. The implementation correctly replaces the hardcoded width with a calculated one. However, there is a potential issue with the width calculation when there are no visible suggestions, which could lead to issues in the future. I've added a comment with a suggestion to make the code more robust.

[galz10]

Thank you for the pull request! The team will review it shortly.

[dracic]

Solved by #5797. Closing.