Polish the AI overview tab layout and styling

What does this MR do and why?

This MR refines the replacement merge request overview that Marc Shaw (@marc_shaw) has built up behind the mr_ai_overview feature flag. His MRs (listed under References) laid the foundation: the data layer, merge readiness, reviewers, description, labels and milestone, risk assessment, and conversations. This MR builds on that work. It is mostly a UI polish and refactor pass, aimed at making the overview read as one calm page instead of a stack of cards, and at reusing patterns people already know from the classic overview, work items, and the sidebar.

Everything in the overview stays behind the default-off mr_ai_overview flag and the per-user opt-in.

Highlights

• Hover a comment to act on it. A thread's actions no longer sit under every comment. Hovering the opening note highlights it, and a small floating toolbar with Reply and Resolve (or Reopen thread) fades in at its corner. The toolbar is transparent rather than hidden, so keyboard and screen reader users still reach the buttons. Tabbing to an action reveals it the same way. See the recording below.
• Lighter page structure. Cards became open sections with larger headings, consistent spacing, and fewer borders. Merge readiness is a single verdict line with compact check rows. Each check's detail sits in a tooltip on its label, with the same text available to screen readers.
• Risk assessment moves into the Description card, as its first row above the description.
• Description works like a work item description. It is shown expanded by default. Long descriptions fade out with a Read more button, using the same fade styles work items use. A description that grows when its images load is measured again, and a link to a heading inside the description opens it in full.
• Conversations match the classic thread list.
  • Resolved and unresolved state is shown with the same check-circle icons as the classic resolve button.
  • File paths show the icon for their file type and use the sidebar's link style.
  • Outdated threads show a tooltip instead of a badge.
  • The comment form is always open at the bottom.
• Reviewers reuse the sidebar's recommended reviewers component, so suggestions look and behave the same in both places.
• Labels and milestone: up to three labels show inline. Past that, they collapse into a count with a toggle. The milestone gets a timeframe tooltip.

Refactor outside the overview

To let the overview draw the risk assessment its own way, the merge request widget's risk assessment logic moved into a shared getRiskAssessmentState helper, and the widget app gained a default scoped slot. Without a slot, the widget renders exactly as before. The widget's existing specs are unchanged and pass. New specs cover the helper and the slot contract.

References

Foundation by Marc Shaw this MR builds on:

• !252481 (merged) Add a user toggle for a replacement MR overview
• !255057 (merged) Add data layer for merge request AI overview tab
• !252997 (merged) Add merge readiness to the replacement MR overview
• !252998 (merged) Add reviewers and recommended reviewers to the replacement MR overview
• !252999 (merged) Add the description to the replacement MR overview
• !257511 (merged) Add labels and milestone to the replacement MR overview
• !257492 (merged) Add the risk assessment to the replacement MR overview
• !257832 (merged) Add discussions to the replacement MR overview
• !257879 (merged) Add filters, roles and file links to the overview conversations
• !257871 (merged) Add thread actions to the overview conversations
• !257872 (merged) Show code snippets and suggestions in the overview conversations
• !258493 (merged) Let the conversations card on the replacement MR overview collapse

Screenshots or screen recordings

Captured from the same seeded merge request on master (before) and on this branch (after).

Before	After

Micro interaction: hovering a comment

Before, Reply and Resolve were always visible under every thread. Now, hovering the opening note highlights it and fades in the floating toolbar. Hovering an action highlights the button.

How to set up and validate locally

1. In the Rails console, enable the flag: Feature.enable(:mr_ai_overview).
2. Open any merge request, select Merge request actions (the vertical ellipsis), then Try the new overview.
3. Check the main areas:
   • Conversations: hover a comment's opening note to see the highlight and the floating Reply / Resolve toolbar. Press Tab through a thread to see the same toolbar appear on focus.
   • Description: on a merge request with a long description, check the Read more fade. Then open the merge request with #<heading-anchor> for a heading in the description, and check that it opens in full.
   • Risk assessment: on a project with risk assessments enabled, check that it shows as the first row of the Description card.
4. Select Merge request actions > Switch to the classic overview, and check that the classic merge request widget's risk assessment looks and behaves as before.

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.