Limit height of Dialog.Overlay

[pavelgromyko]

I have an application that is written in electron using react.

As you understand from the question, I use Dialog. When a Dialog.Contentis opened, Dialog.Overlay extends to the entire screen; therefore, outside of Dialog.Content, the entire application is not active. However, my application has a TitleBar (which takes up 50px from the top of the screen) and I would like the Dialog.Overlay not to extend to the TitleBar . That is, when opening Dialog.Content, Dialog.Overlay would cover the entire window except the TitleBar

my Dialog.Overlay now

<Dialog.Overlay className="data-[state=open]:animate-overlayShow fixed inset-0 bg-[grey] backdrop-blur-[2px]" />

[joaom00]

you can change the value of inset-0 to whatever you want: ... inset-0 top-[50px] ...

[pavelgromyko]

@joaom00 Thanks, that's a good idea. I tried it too. But the problem here is that this space (50 pixels) remains disabled. That is, I cannot press buttons in TitleBar

[pavelgromyko]

@joaom00 Perhaps you know how to make the buttons located in the TitleBar active?

[joaom00]

Try set pointer-events: auto in the TitleBar

[pavelgromyko]

@joaom00 It`s great! Thank you a lot!