fix(js): Increase inbox z index #7941
Conversation
✅ Deploy Preview for dashboard-v2-novu-staging canceled.
|
| @@ -9,7 +9,7 @@ import { usePopover } from './PopoverRoot'; | |||
| export const popoverContentVariants = () => | |||
| cn( | |||
| 'nt-w-[400px] nt-h-[600px] nt-rounded-xl nt-bg-background', | |||
| 'nt-shadow-popover nt-animate-in nt-slide-in-from-top-2 nt-fade-in nt-z-10 nt-cursor-default nt-flex nt-flex-col nt-overflow-hidden nt-border nt-border-border' | |||
| 'nt-shadow-popover nt-animate-in nt-slide-in-from-top-2 nt-fade-in nt-z-[9999] nt-cursor-default nt-flex nt-flex-col nt-overflow-hidden nt-border nt-border-border' | |||
There was a problem hiding this comment.
@desiprisg isn't that a bit too much, meaning the Inbox will go over a modal?
There was a problem hiding this comment.
This would be our custom popover. If it's open, i don't see why a modal would be open at the same time. However, we need to have a value that will surely be above any headers/sidebars an app might have.
There was a problem hiding this comment.
Any guess is arbitrary cause the z-index is arbitrary. I wonder if we can find a heuristic to detect the header container and always do z-index of that container + 10.
There was a problem hiding this comment.
why do we have to increase z-index? shouldn't it be always on the top of everything rn?
like the way it's rendered in the dom tree is that it's always rendered at the bottom of the body element
There was a problem hiding this comment.
Devs might have a z-index set on their elements. it doesn't work this way.
There was a problem hiding this comment.
If we can create an independent stacking context from the root then we won't need to bother about it. But I wasn't able to do that quickly, it always falls under the parent. Played here: https://codepen.io/LetItRock/pen/emYjRWX
|
@desiprisg Are we keeping this afterall? |
imo yes |
What changed? Why was the change needed?
Screenshots
Expand for optional sections
Related enterprise PR
Special notes for your reviewer