I found a small style defect with the LWC version of the Calendar - particularly when there are more events that can be fit into the day. When you click and scroll on the +x more to show an OverflowPopup with all the events for that day and have another LWC version of Grid or component below the calendar component, the OverPopup renders behind the LWC below.
After some investigation, I found out that the b-panel class which implements a z-index value of 0 is causing the popup to render behind the second LWC component. I have attached a video below. I was not able to reproduce the defect on Bryntum demos but, did replicate it with simple LWC demos.
Is it your own popup or ours? Could you please share the code of that component and check z-index of grid component as well. Does it have default styling or custom?
Form z-index docs https://www.w3schools.com/cssref/pr_pos_z-index.asp
An element with greater stack order is always in front of an element with a lower stack order.
I have also used the Bryntum Grid example demo code with no additional custom styling and displays this odd behavior.
When inspected the z-index of the grid has the same z-index of 0 as the OverflowPopup. It looks like it uses the same class b-panel style.
I have checked another widget popup on the Calendar by right clicking on one of the calendar events but, unlike the OverflowPopup this popup does not hide behind the second component. It seems this one implements
b-float-root
class which has a higher z-index of 1100.
Attachments
Screen Shot 2022-08-25 at 10.15.04 AM.png (411.55 KiB) Viewed 696 times
Would this style fix be implemented on the Calendar component on your end as this means that every time we implement a calendar component we would need to boost the z-index for the widgets to behave correctly.