fix(ui): prevent overlapping banner details when multiple expanded

[lklimek]

Issue being fixed

Closes #681

User Story

Imagine you are a developer using Dash Evo Tool and you encounter multiple errors at once. You click "Show details" on each error banner to see the technical information — but the expanded details sections overlap each other, making them unreadable. After this fix, each banner's details section properly takes its own vertical space, so you can read and compare errors side by side.

What was done?

Added unique id_salt(banner_key) to the ScrollArea inside render_banner(), so each banner's expanded details section gets its own egui widget ID. Previously, multiple expanded ScrollAreas without explicit IDs caused egui ID collisions, leading to visual overlap.

Changes:

• Added banner_key: u64 parameter to render_banner() function
• Added .id_salt(banner_key) to ScrollArea::vertical() in the details section
• Passed state.key at the call site in process_banner()

How has this been tested?

• All 42 kittest UI tests pass
• Clippy clean, formatter clean
• Manual test scenario: docs/ai-design/2026-03-05-banner-details-overlap/manual-test.md

Test plan

• docs/ai-design/2026-03-05-banner-details-overlap/manual-test.md

Breaking Changes

None

Checklist

• I have performed a self-review of my own code
• I have added or updated relevant tests
• I have made corresponding changes to the documentation if needed

_{🤖 Co-authored by Claudius the Magnificent AI Agent}

Summary by CodeRabbit

• Bug Fixes

  • Fixed issue where banner details would overlap when multiple banners are expanded simultaneously.

• Documentation

  • Added comprehensive manual testing documentation for banner details behavior, scrolling independence, and reflow scenarios.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 84f0e036-667f-43b4-a877-de494a11d3f1

📥 Commits

Reviewing files that changed from the base of the PR and between d3f3546 and 9a70e71.

📒 Files selected for processing (2)

• docs/ai-design/2026-03-05-banner-details-overlap/manual-test.md
• src/ui/components/message_banner.rs

---

📝 Walkthrough

Walkthrough

This PR fixes overlapping banner details by propagating unique banner keys to the render_banner function, ensuring each expanded banner's scrolling area has independent identity. Adds manual test documentation for the feature.

Changes

Cohort / File(s)	Summary
Test Documentation docs/ai-design/2026-03-05-banner-details-overlap/manual-test.md	Introduces manual test document covering prerequisites, test scenario for multiple expanded banner details, steps for validating independent scrolling and collapse behavior, expected results, and regression checks.
Message Banner Component src/ui/components/message_banner.rs	Adds banner_key: u64 parameter to render_banner function and assigns unique id_salt(banner_key) to the details ScrollArea, ensuring per-banner scrolling area identity. Includes clippy allow attribute for expanded parameter list.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Banners once would overlap and blend,
Details clashing without end,
But now each scrolls with unique key,
Independent, crisp, and free!
No more chaos, just harmony's song,
Where details belong. 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly and specifically describes the main change: fixing overlapping banner details when multiple banners are expanded, which directly addresses the core issue.
Linked Issues check	✅ Passed	The code changes directly address issue #681 by adding unique id_salt to each banner's details ScrollArea to prevent widget ID collisions and overlap.
Out of Scope Changes check	✅ Passed	All changes are scoped to the banner details overlap fix: the manual test document and modifications to banner rendering logic are directly related to the linked issue.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/681-banner-details-overlap

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}