Fix Duo Agentic Chat subheader alignment

What does this MR do and why?

Fixes vertical alignment issues in the Duo Agentic Chat subheader:

CleanShot_2026-05-14_at_10.48.10

  • Moves the session-id dropdown (the #header slot in duo_agentic_chat_state_manager.vue) out of its absolutely-positioned wrapper and into the chat header's right-side flex container. The previous gl-absolute gl-right-5 gl-top-10 gl-pt-2 positioning required hard-coded offsets and didn't reliably align with the subheader content.
  • Adds gl-items-center to the inner avatar/title block in duo_chat_header.vue so the 32px avatar stays vertically centered with the title and agent handler text instead of sticking to the top of a stretched flex row.

References

Screenshots or screen recordings

Before After
Before_-_Duo_Chat_Header CleanShot_2026-05-14_at_10.47.18

How to set up and validate locally

  1. Open Duo Agentic Chat.
  2. Start a new chat and confirm the empty state subheader still renders as before.
  3. Open an existing thread and confirm the avatar, title/agent handler, and session-id dropdown are all vertically aligned in the middle of the subheader row.

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