Skip to content

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

Open
tarunvashishth wants to merge 1 commit into
patternfly: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 into
patternfly:mainfrom
tarunvashishth:fix/nav-shadow-bug-on-mobile-viewport

Conversation

@tarunvashishth

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

Copy link
Copy Markdown
Contributor

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

coderabbitai Bot commented Mar 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

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

patternfly-build commented Mar 5, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

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

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

@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
@jcmill jcmill self-requested a review June 18, 2026 18:31
jcmill
jcmill reviewed Jun 18, 2026
View reviewed changes

@jcmill jcmill 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.

@tarunvashishth, I see what you're doing here. Good call on tackling the mobile size, but I think we could achieve this more simply by keeping __nav at --pf-t--global--z-index--sm and bumping up the __footer z-index token from xs to sm. Making them match.

With both set the same z-index, the stacking order would handle where the shadow is displayed across all sizes. In other words, the __nav would naturally fall behind the __footer due to the DOM order.

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

Reviewers

@jcmill jcmill jcmill left review comments

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 - Wizard - nav shadow bug on mobile viewport

3 participants

@tarunvashishth @patternfly-build @jcmill