Skip to content

fix(Alert): updated alignment of icon for multiline titles - #8461

Merged
mcoker merged 1 commit into
patternfly:mainfrom
thatblindgeye:iss8434
Jun 22, 2026
Merged

fix(Alert): updated alignment of icon for multiline titles#8461
mcoker merged 1 commit into
patternfly:mainfrom
thatblindgeye:iss8434

Conversation

@thatblindgeye

@thatblindgeye thatblindgeye commented Jun 18, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Closes #8434

Summary by CodeRabbit

  • Bug Fixes
    • Improved vertical alignment of alert icons to ensure proper positioning within alert components.

@thatblindgeye
thatblindgeye requested a review from mcoker June 18, 2026 15:48
@coderabbitai

coderabbitai Bot commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: e304fa29-bd11-4e2f-abf6-a8c84dc9a23c

📥 Commits

Reviewing files that changed from the base of the PR and between 5649cea and 701f435.

📒 Files selected for processing (1)
  • src/patternfly/components/Alert/alert.scss

Walkthrough

Adds align-self: baseline to the .#{$alert}__icon CSS rule in alert.scss. This single-line change fixes the icon's vertical alignment within the alert grid layout when the alert title spans multiple lines.

Changes

Alert Icon Alignment Fix

Layer / File(s) Summary
Alert icon align-self property
src/patternfly/components/Alert/alert.scss		 Adds align-self: baseline to the .#{$alert}__icon rule so the icon aligns to the text baseline rather than drifting vertically when the title wraps to multiple lines.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested reviewers

  • kmcfaul
  • srambach
  • mcoker
🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The pull request title follows conventional commit guidelines with a proper format (type: scope - description) and accurately describes the fix to the Alert component's icon alignment.
Linked Issues check ✅ Passed The code changes successfully address issue #8434 by adding align-self: baseline to the alert icon, which prevents vertical misalignment when titles span multiple lines.
Out of Scope Changes check ✅ Passed All changes are directly related to fixing the Alert component icon alignment issue described in #8434 with no extraneous modifications.

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

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

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

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

@patternfly-build

patternfly-build commented Jun 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Preview: https://pf-pr-8461.surge.sh

A11y report: https://pf-pr-8461-a11y.surge.sh

mcoker
mcoker reviewed Jun 22, 2026
View reviewed changes

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LPTM. Backstop report - alert-icon-backstop.pdf

@mcoker
mcoker merged commit c9b157d into patternfly:main Jun 22, 2026
6 checks passed
@patternfly-build

patternfly-build commented Jun 22, 2026

Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 6.6.0-prerelease.10 🎉

The release is available on:

Your semantic-release bot 📦🚀

This was referenced Jul 8, 2026
Closed
Open
@coderabbitai coderabbitai Bot mentioned this pull request Jul 21, 2026
Open
1 of 3 tasks
@patternfly-build patternfly-build mentioned this pull request Jul 22, 2026
Closed
@coderabbitai coderabbitai Bot mentioned this pull request Jul 22, 2026
Open
@patternfly-build patternfly-build mentioned this pull request Jul 28, 2026
Closed
@jelly jelly mentioned this pull request Aug 3, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mcoker mcoker mcoker approved these changes

Assignees

No one assigned

Labels

released on @prerelease

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug - Alert - Icon floats away with lines in title

3 participants

@thatblindgeye @patternfly-build @mcoker