Looking to create a dialogue box that fills the entire width and height of the screen? Want to divide its content into two sections - an image and a footer area with 2 rows of height? Struggling to contain the image within its designated space without overflowing the dialog box? Tried using tailwindcss attributes like 'w-full' and 'h-full', but not getting the desired result?
<dialog
bind:this={dialog}
class="w-screen h-screen rounded-xl bg-surface-50 mx-auto my-auto overflow-hidden border-0" tabindex="-1"
onclick="event.target==this && this.close()"
>
<div class="w-full h-full flex flex-col relative border-0" tabindex="-1">
<div class="flex-grow">
<img src={image?.s3_path} alt="photo" class="object-contain h-full w-full">
<!-- <div class="w-full h-full bg-primary-400"></div> -->
</div>
<div class="w-full h-12">
x
</div>
</div>
</dialog>
Various attempts have been made such as removing 'h-full', using 'h-auto', and more, all in search for a solution.
Your assistance on resolving this issue would be highly appreciated. Thank you!