X Tutup
Skip to content

fix(wizard): adjust z-index for nav shadow bug on mobile viewport#8205

Open
tarunvashishth wants to merge 1 commit intopatternfly:mainfrom
tarunvashishth:fix/nav-shadow-bug-on-mobile-viewport
Open

fix(wizard): adjust z-index for nav shadow bug on mobile viewport#8205
tarunvashishth wants to merge 1 commit intopatternfly:mainfrom
tarunvashishth:fix/nav-shadow-bug-on-mobile-viewport

Conversation

@tarunvashishth
Copy link
Contributor

@tarunvashishth tarunvashishth commented Mar 5, 2026 •
edited by coderabbitai bot
Loading

Fixes #7225

When the navigation bar touches the footer, a shadow will be visible on screens with a width less than 576px. This shadow will be hidden on screens wider than 576px.

Screenshot 2026-03-05 at 1 36 52 PM Screenshot 2026-03-05 at 1 37 06 PM

Summary by CodeRabbit

  • Style
    • Optimized wizard component rendering on mobile devices with improved responsive layering and element stacking.
    • Enhanced footer positioning for better visibility across all screen sizes.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 5, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: ASSERTIVE

Plan: Pro

Run ID: d2e6ee1d-6ef9-4972-88c9-3e54e4cd6876

📥 Commits

Reviewing files that changed from the base of the PR and between d8cc066 and 1f5e2bb.

📒 Files selected for processing (1)
  • src/patternfly/components/Wizard/wizard.scss

Walkthrough

Modifies z-index values in the Wizard component's stylesheet to make navigation stacking responsive. Introduces a mobile-specific z-index variable for navigation and adds a breakpoint-based override, while adjusting footer z-index. This addresses stacking order issues on mobile viewports.

Changes

Cohort / File(s) Summary
Wizard Z-Index Responsive Fix
src/patternfly/components/Wizard/wizard.scss		 Added mobile z-index variable for wizard navigation, changed default navigation z-index to extra-small with mobile override to medium, and increased footer z-index from extra-small to small for proper visual stacking on mobile viewports.

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 Title follows conventional commit format with 'fix' prefix and clearly describes the z-index adjustment for the mobile nav shadow bug.
Linked Issues check ✅ Passed Changes adjust z-index values to ensure nav shadow displays correctly under footer on mobile viewports, directly addressing issue #7225.
Out of Scope Changes check ✅ Passed All changes are focused on wizard z-index adjustments for mobile nav shadow behavior, with no unrelated modifications present.

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

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
Copy link
Collaborator

patternfly-build commented Mar 5, 2026 •
edited
Loading

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

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

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug - Wizard - nav shadow bug on mobile viewport

2 participants

@tarunvashishth @patternfly-build
X Tutup