[EuiCollapsibleNavBeta] Fix z-index level to match production EuiCollapsibleNav

[cee-chen]

Summary

This ensures that the nav sits above any EuiTourStep or other popover elements (otherwise, popovers by default will sit above flyouts). Thank you to @kapral18 for pointing this out to us.

EuiCollapsibleNav styles:

eui/packages/eui/src/components/collapsible_nav/collapsible_nav.styles.ts

Line 17 in 5c40315

z-index: ${euiTheme.levels.navigation};

VRT screenshots appear to be minute pixel-level changes, I'm just adding them in here to get them updated

QA

• https://eui.elastic.co/pr_8075/?path=/story/navigation-euicollapsiblenav-beta-euicollapsiblenavbeta--playground should have a z-index of 6000

General checklist

• Browser QA
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
    - [ ] Checked in both light and dark modes
    - [ ] Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA - N/A
• Code quality checklist
  - [ ] Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist - N/A, beta component
• Designer checklist - N/A

[cee-chen]

@sebelga Just to check, do you see any issues with increasing the z-index of the serverless nav to be above popovers especially when in push / non-mobile mode?

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 6271810

[kapral18]

hey @cee-chen after thinking a bit I realized that even though this is correct course of action for eui library in isolation, for kibana this will block adoption of eui version that releases this change, because there are a lot of elements currently that are above navigation and after this change will be below, for example the timeline, which currently sits at 1003 z index etc... We need to first fix z-index usage in kibana and correctly position relationships between stacked z-indices across the ui using https://eui.elastic.co/#/theming/more-tokens%23levels as a reference.

cc: @elastic/security-threat-hunting-explore @elastic/security-threat-hunting-investigations

[cee-chen]

Gotcha, no worries, I can scrap this PR if it will interfere with Kibana. Thank you for investigating this so thoroughly @kapral18!

[sebelga]

Just to check, do you see any issues with increasing the z-index of the serverless nav to be above popovers especially when in push / non-mobile mode?

I wonder if that would impact this popover (tour) that we added elastic/kibana#194926. Althoug it is declared inside the header.

[cee-chen]

Popovers inherit the z-index of the element they are anchored to and sit 2000 levels above that, so if the tour is inside the header, it should be fine. But either way no worries, I'll go ahead and close this PR out for the blockers that Karen mentioned above.