fix(Dialog): add z-index to non-modal dialogs - #5123
Conversation
🦋 Changeset detectedLatest commit: 0f25702 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Pull request overview
Updates the CSS for Dialog to ensure non-modal dialogs render above other UI elements (e.g., Search icons) by giving the dialog a default stacking order, addressing issue #4208.
Changes:
- Adds a
z-indexto.ds-dialogto avoid overlap issues when a non-modal dialog is displayed over other components.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| padding: var(--dsc-dialog-spacing); | ||
| position: fixed; | ||
| width: 100%; | ||
| z-index: calc(infinity); /* non-modal dialog has no z-index, but we want a good default here */ |
There was a problem hiding this comment.
No, this is valid CSS and has 98% support in Norway
https://caniuse.com/mdn-css_types_calc-keyword_infinity
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc-keyword
https://www.matuzo.at/blog/2025/never-lose-a-z-index-battle-again
https://meyerweb.com/eric/thoughts/2025/08/20/to-infinity-but-not-beyond/
|
Preview deployments for this pull request: storybook - |
Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>
Resolves #4208