Skip to content

fix(menu-toggle): Fix MenuToggle avatar misalignment with adjacent form controls outside flex layouts#8196

Open
tarunvashishth wants to merge 1 commit into
patternfly:mainfrom
tarunvashishth:fix/menu-toggle-avatar-alignment
Open

fix(menu-toggle): Fix MenuToggle avatar misalignment with adjacent form controls outside flex layouts#8196
tarunvashishth wants to merge 1 commit into
patternfly:mainfrom
tarunvashishth:fix/menu-toggle-avatar-alignment

Conversation

@tarunvashishth

@tarunvashishth tarunvashishth commented Mar 3, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Fixes #7478

Screenshot 2026-03-03 at 8 56 27 PM

Summary by CodeRabbit

  • Style
    • Improved visual alignment of the menu toggle component for better presentation.

@tarunvashishth
fix(menu-toggle): add vertical-align for proper avatar alignment
cd1ca93 
Menu toggle with avatar was sitting ~2px below other form elements
when placed next to each other. Adding vertical-align: middle fixes this.
@coderabbitai

coderabbitai Bot commented Mar 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Caution

Review failed

The head commit changed during the review from 46ce58a to cd1ca93.

Walkthrough

A single line CSS property (vertical-align: middle) was added to the menu-toggle component's root selector to address vertical alignment issues when menu toggles appear alongside other inline elements.

Changes

Cohort / File(s) Summary
Menu Toggle Styling
src/patternfly/components/MenuToggle/menu-toggle.scss		 Added vertical-align: middle to the .#{$menu-toggle} rule to fix misalignment when menu toggles with avatars sit alongside other inline elements.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 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 title follows conventional commit format (type: description) and clearly describes the main change: fixing MenuToggle avatar misalignment with adjacent form controls outside flex layouts.
Linked Issues check ✅ Passed The code change (adding vertical-align: middle) directly addresses the alignment bug reported in #7478, fixing the 2px vertical offset of avatar MenuToggle components relative to adjacent form controls.
Out of Scope Changes check ✅ Passed The change is narrowly scoped to fixing the specific alignment issue in MenuToggle, with no unrelated modifications to layout, behavior, or other components.

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

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

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 Mar 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

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

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

@coderabbitai coderabbitai Bot requested review from kmcfaul and mcoker March 4, 2026 16:11
@tarunvashishth tarunvashishth force-pushed the fix/menu-toggle-avatar-alignment branch from 46ce58a to cd1ca93 Compare March 4, 2026 16:11
@nicolethoen nicolethoen linked an issue Mar 16, 2026 that may be closed by this pull request
Menu - Unified theme updates (Core) #8060
Closed
@nicolethoen nicolethoen removed a link to an issue Apr 1, 2026
Menu - Unified theme updates (Core) #8060
Closed
@github-actions

github-actions Bot commented May 6, 2026

Copy link
Copy Markdown

This PR has been automatically marked as stale because it has not had activity in the last 60 days.

@github-actions github-actions Bot added the Stale label May 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kmcfaul kmcfaul Awaiting requested review from kmcfaul

@mcoker mcoker Awaiting requested review from mcoker

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

Stale

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug - Menu toggle - avatar alignment issues

2 participants

@tarunvashishth @patternfly-build