Skip to content

Fix icon vertical alignment in alert component#4823

Open
lmac-1 wants to merge 4 commits into
mainfrom
4730-vertical-alignment-banners
Open

Fix icon vertical alignment in alert component#4823
lmac-1 wants to merge 4 commits into
mainfrom
4730-vertical-alignment-banners

Conversation

@lmac-1
Copy link
Copy Markdown
Collaborator

@lmac-1 lmac-1 commented Jun 1, 2026

Description

This PR fixes vertical alignment for the sandbox banners on settings page. See screenshots on #4730 for before.

Closes #4730

Validation steps

  1. Open a sandbox of a project
  2. Go to "Settings"
  3. Each settings panel should have an alert message - make sure that the vertical alignment looks correct. The change is subtle.
  4. Also, try to merge the sandbox and check the icon - it should be aligned to the top header rather than in the middle

Additional notes for the reviewer

  1. (Is there anything else the reviewer should know or look out for?)

AI Usage

Please disclose whether you've used AI anywhere in this PR (it's cool, we just
want to know!):

  • I have used Claude Code
  • I have used another model
  • I have not used AI

You can read more details in our
Responsible AI Policy

Pre-submission checklist

  • I have performed an AI review of my code (we recommend using /review
    with Claude Code)
  • I have implemented and tested all related authorization policies.
    (e.g., :owner, :admin, :editor, :viewer)
  • I have updated the changelog.
  • I have ticked a box in "AI usage" in this PR

Use `block` on the icon span to remove inline line-box descender space,
and derive flex alignment from whether a header is present: `items-center`
for single-line alerts, `items-start` for multi-line alerts with a header.
@github-project-automation github-project-automation Bot moved this to New Issues in Core Jun 1, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 1, 2026

Security Review ✅

  • S0 (project scoping): N/A, change is purely CSS class adjustments in lib/lightning_web/live/components/common.ex with no data access.
  • S1 (authorization): N/A, no new web-layer actions or handlers introduced.
  • S2 (audit trail): N/A, no writes to configuration resources.

@codecov
Copy link
Copy Markdown

codecov Bot commented Jun 1, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.3%. Comparing base (6331486) to head (547e500).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##            main   #4823     +/-   ##
=======================================
- Coverage   90.3%   90.3%   -0.0%     
=======================================
  Files        442     442             
  Lines      22545   22546      +1     
=======================================
  Hits       20350   20350             
- Misses      2195    2196      +1     

☔ View full report in Codecov by Sentry.
📢 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.

@lmac-1 lmac-1 requested review from doc-han and theroinaochieng June 1, 2026 20:54
@lmac-1
Copy link
Copy Markdown
Collaborator Author

lmac-1 commented Jun 2, 2026

Kicking off tests again because looks like tests failed (don't think it's related to my changes as they are just frontend)

@lmac-1
Copy link
Copy Markdown
Collaborator Author

lmac-1 commented Jun 2, 2026

They passed, yay!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: New Issues

Development

Successfully merging this pull request may close these issues.

Vertical alignment in info/warning banners broken

1 participant