Adjust Flyout z-index to Prevent Header Elements Being Hidden

[sidwang42]

Description

The current OUI implementation assigns a high z-index ($ouiZHeader - 1, effectively 999) to the .ouiFlyout.ouiFlyout--push element:

.ouiFlyout.ouiFlyout--push {
  box-shadow: none;
  clip-path: none;
  animation-duration: 0s; // Don't animate on loading a docked nav
  border-left: $ouiBorderThick;
  z-index: $ouiZHeader - 1; // effectively 999
}

This layering causes essential header elements (such as navigation toggles) to become hidden behind the flyout. Downstream consumers currently need to use overrides such as:

z-index: $ouiZHeader - 3 !important;

However, this is not maintainable, as it introduces reliance on !important and external overrides.

Proposed Change
Update the z-index logic for .ouiFlyout.ouiFlyout--push so that:

• Header UI elements remain accessible and visible above the flyout.
• Consumers do not need to rely on !important overrides.

Rationale

• Reduces the need for fragile downstream overrides.
• Ensures OUI provides correct default layering behavior out-of-the-box.
• Improves maintainability by centralizing style logic in OUI.

Next Steps

• Discuss the desired z-index offset with OUI maintainers.
• Adjust _flyout.scss accordingly.
• Provide guidance in OUI docs if custom offsets are needed in rare cases.