I’ve been experimenting with openAppFeatureModal to get a nice large size for a big modal.
What I really want is to be able to take up as much room as possible, perhaps with a nice bit of margin all the way around it.
I’ve found that if I set a massive width and height, it’s the same as getting a full screen modal:
monday.execute(
'openAppFeatureModal',
{ urlPath, urlParams, height: 1000000, width: 1000000 }
);
This unfortunately means that there are curved corners, which look a bit odd:
It also means that I’ve almost completely hidden the monday UI. I’m guessing that this really isn’t cool as now there is a complete lack of context for this modal.
Is there a way to get the modal to take up almost the full browser width and height instead?
In CSS, we could use something like this to set a maximum size:
.app-modal-component {
max-width: calc(100vw - var(--spacing-xxxl));
max-height: calc(100vh - var(--spacing-xxxl));
}
In this case, monday’s styles say that --spacing-xxxl is 64px, so it would give 32px margin around the modal.
This would fix things to have a max size just a bit smaller than the browser.
I’ve tried this in dev tools and things look so much better:
Can you apply my simple CSS update to fix this please?
Cc: @Matias.Monday
