Fix topic spacing in the Duo Chat empty state

Vanessa Ottorequested to merge
fix/duo-chat-topic-section-spacing into master

What does this MR do and why?

Clarifies the separation between the header/action and suggested topics in the shared Duo Chat empty state.

Previously, the topics title sat 12px below the header/action but 28px above the prompts because the parent gap combined with the prompts' built-in margin. This made the plan action look grouped with "Chat about different topics."

  • Groups the topics title and prompts in a wrapper.
  • Sets 24px between the header/action and topics section.
  • Sets 8px between the topics title and first prompt.
  • Removes the extra prompt margin locally.

References

Reported in UI review; no linked issue.

Screenshots or screen recordings

Before After
Before: topics title sits close to the plan action, with excessive space above prompts After: topics section is separated from the plan action, with prompts closer to their title

Before screenshot: Recreated by applying the previous markup/classes in the browser. No source files were edited for it.

How to set up and validate locally

  1. Use a GDK with Duo Agent Platform access and workplan enabled.
  2. Open a work item without a saved plan, then open Duo Chat.
  3. Confirm 24px after the Generate workplan action before the topics heading, then 8px before the first of four prompt buttons.
  4. Repeat with the default chat header from the Projects page.
  5. Check both headers at 1280px and 390px; all four buttons should fit without overflow.

MR acceptance checklist

Evaluated against the MR acceptance checklist.

  • Reviewed, browser-verified, and tested.
  • Documentation: Not required for this spacing-only change.
  • Changelog included: This shared chat fix is independent of the workplan feature flag.
Edited by Vanessa Otto

Merge request reports