fix: The content-manager header has a z-index of 10 while the modal has a z-index of 4

[gitstart]

What does it do?

• Fixes issue where the Modal and Dialog appear behind the content-manager because they have a lower z-index value.

Why is it needed?

• Improve UI/UX when the Modal and Dialog is correctly positioned when opened.

How to test it?

1. Run the app yarn develop
2. Find combined-w-scroll in Components and click on Add an entry button.
3. See that the modal is in front of header.

Demo

https://www.loom.com/share/06f94943db7046fb955bbf8530fa6f65

Before

After

---

This code was written and reviewed by GitStart Community. Growing great engineers, one PR at a time.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d3a15b5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
design-system	❌ Failed (Inspect)			Sep 12, 2023 7:30am
design-system-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2023 7:30am

[marco-villanueva]

If only the z-index of the modal is increased, no options, comboboxes, popovers and I don't know if there are any other components.

In my case what I did was to put the header of the content-manger in 5, the modal in 5 and the others that are hardcoded as the dialog in 5.

[marco-villanueva]

This worked for me:

HeaderLayout = zIndices[1]
ModalLayout = zIndex: 5
Dialog = zIndex: 5
Tooltip = z-index: 6

[joshuaellis]

not needed in design-system@2