Is it possible to render a Mantine Modal within a specific element (vs entire page )

[Manbearpixel]

Say I had a side panel on a website and when a user clicks some sort of action within this panel I want to render a Modal. Instead of rendering the modal however over the entire page, can I get it to render JUST within the bounds of a given parent? I was thinking of ref but Typescript is complaining to me and I am not sure if the result will be as intended.

This is an ask as I'd like a user to initiate a flow within an enclosed part of the application and not necessarily block anything from happening on the rest of the application. Thanks in advance!

Specs

Mantine v7.90

React v18

Node v17.9.1

Next.js v13.5.6

[rtivital]

It is not built into the library, bit you should be able to achieve that by customizing styles with Styles API

[Manbearpixel]

Thanks for the reply @rtivital I was curious if there was a "hacky" way to achieve this via "portals"? 🤔

[Manbearpixel]

I was able to complete what I needed to do by setting withinPortal to false on the <Modal /> as well as adjusting the styles as recommended by @rtivital in order to set the correct positioning and siizng.