Truncate flow descriptions in slash commands menu
What does this MR do and why?
In Duo Agentic Chat, typing / lists AI Catalog flow commands with their full catalog description. Those descriptions are free-form prose and wrap onto multiple lines, which overwhelms the fixed-width dropdown panel.
This MR adds the gl-truncate utility class to the description row in the slash commands menu, so each description is limited to a single line and truncated with an ellipsis. The truncation is purely presentational — the description string itself is left untouched, and no title attribute or tooltip is added, per the issue discussion.
References
Resolves #629466 (closed)
Screenshots or screen recordings
Not attached: this environment cannot render the chat UI. The change is a single utility class (gl-truncate) on the description element; the accompanying Jest spec asserts the class is applied to every option's description row.
| Before | After |
|---|---|
![]() |
![]() |
How to set up and validate locally
- Open Duo Agentic Chat with the AI Catalog flows enabled.
- Type
/in the prompt composer to open the slash commands menu. - Verify each command's description renders on a single line, truncated with an ellipsis when it exceeds the panel width.
Automated coverage: yarn jest ee/spec/frontend/ai/duo_agentic_chat/components/prompt_composer/slash_commands_menu/slash_commands_menu_spec.js — a new spec under option markup asserts every option's description element carries gl-truncate.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

