Fleet UI: Align InfoBanner leading icon with first line of wrapped copy

[RachelElysia]

Issue

Closes #51395

Description

• Bug fix (root cause): .icon carries align-self: center (frontend/components/Icon/_styles.scss:6), which was overriding the .info-banner__icon container's align-items: flex-start and pulling every InfoBanner leading icon back to the vertical center whenever the copy wrapped to more than one line (Andrey's "End user is not notified…" repro).
• Fix: give .info-banner__leading-icon its own align-self: flex-start plus a one-line-tall height so the 16px svg sits centered inside the first-line band and visually tracks the first line of copy no matter how many lines the message wraps to. Same technique as the toast icon fix in Fleet UI: Align toast icon with first line of message #50449.

Screenrecording

• InfoBanner with a wrapping "End user is not notified…" message — showing icon aligning with the first line

Screen.Recording.2026-08-18.at.11.48.44.AM.mov

Testing

• QA'd all new/changed functionality manually

Summary by CodeRabbit

• Style
  • Improved informational banner layouts with leading icons.
  • Icons now align with the first line of wrapped text and remain centered for single-line banners.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.77%. Comparing base (c4c230d) to head (4696d33).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff            @@
##             main   #51446    +/-   ##
========================================
  Coverage   68.77%   68.77%            
========================================
  Files        4005     4005            
  Lines      259206   259206            
  Branches    13674    13831   +157     
========================================
+ Hits       178265   178269     +4     
+ Misses      65128    65124     -4     
  Partials    15813    15813            

Flag	Coverage Δ
frontend	62.88% <ø> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[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 Plus

Run ID: 06d05b67-8444-4bd4-81fd-5b0a4b85e949

📥 Commits

Reviewing files that changed from the base of the PR and between c4c230d and 4696d33.

📒 Files selected for processing (1)

• frontend/components/InfoBanner/_styles.scss

Included review availability: Your plan includes up to 8 reviews per rolling hour; 7 remain after this review.

---

Walkthrough

Updated the InfoBanner leading-icon styles. The icon now aligns with the first line of wrapped text. The SVG centers within the line height. The icon does not shrink in the flex layout.

Possibly related issues

• The "end users not notified" banner icon is not properly aligned #51395: Addresses the same leading-icon vertical-alignment issue in wrapped InfoBanner text.

Merge Risk: ⚪ Minimal · up to 4696d

This change only adjusts the InfoBanner leading icon so it aligns with the first line of wrapped text; no actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the InfoBanner icon alignment fix for wrapped copy.
Description check	✅ Passed	The description identifies the issue, explains the root cause and fix, links the issue, and records manual QA.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 51395-infobanner-icon-align-first-line

---

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.}

[Copilot]

Pull request overview

Fixes a Fleet UI layout bug where the InfoBanner leading icon becomes vertically centered when the banner message wraps to multiple lines. The change aligns the icon with the first line of text by overriding the global .icon { align-self: center; } behavior specifically for InfoBanner.

Changes:

• Adjusted InfoBanner leading icon styling to align-self: flex-start.
• Added a one-line-tall height band so the icon visually tracks the first line on wrapped messages.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.