Truncate long titles in chat header

What does this MR do and why?

This MR fixes a UI bug where long chat titles in the Duo Chat header were not being truncated. Applied the gl-truncate utility class to the chat title <h3> element to automatically truncate long titles with an ellipsis when they exceed the container width.

References

Closes Truncate long chat titles in header (#578536 - closed) • Austin Regnery • 18.6

Screenshots or screen recordings

Before After
CleanShot_2025-10-27_at_09.26.54 CleanShot_2025-10-27_at_09.27.44

How to set up and validate locally

  1. Enable Duo Chat in your GitLab instance
  2. Navigate to any project or group where Duo Chat is available
  3. Open the AI-powered side panel and start a new chat
  4. Create or rename a chat with a very long title (e.g., "This is an extremely long chat title that should be truncated when it exceeds the available space in the header")
  5. Observe that the title is now properly truncated with an ellipsis (...) instead of overflowing
  6. Verify the truncation works across different viewport sizes

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.

Edited by Austin Regnery

Merge request reports

Loading