Fixed height of modal

This commit is contained in:
Lucas Oliveira 2024-03-31 13:36:21 +03:00
commit f451aca33e

View file

@ -139,7 +139,7 @@ function BaseModal({
break; break;
case "large": case "large":
minWidth = "min-w-[85vw]" ; minWidth = "min-w-[85vw]" ;
height = "h-[80vh]"; height = "h-[90vh]";
break; break;
case "three-cards": case "three-cards":
minWidth = "min-w-[1066px]"; minWidth = "min-w-[1066px]";
@ -147,7 +147,7 @@ function BaseModal({
break; break;
case "large-thin": case "large-thin":
minWidth = "min-w-[65vw]"; minWidth = "min-w-[65vw]";
height = "h-[70vh]"; height = "h-[90vh]";
break; break;
case "large-h-full": case "large-h-full":
minWidth = "min-w-[80vw]"; minWidth = "min-w-[80vw]";
@ -172,33 +172,33 @@ function BaseModal({
<Modal open={open} onOpenChange={setOpen}> <Modal open={open} onOpenChange={setOpen}>
{triggerChild} {triggerChild}
<ModalContent className={cn(minWidth, height, "duration-300")}> <ModalContent className={cn(minWidth, height, "duration-300")}>
<div className="truncate-doubleline word-break-break-word"> <div className="truncate-doubleline flex-shrink-0 word-break-break-word">
{headerChild} {headerChild}
</div> </div>
<div <div
className={`flex flex-col w-full transition-all duration-300`} className={`flex flex-col h-full w-full transition-all duration-300`}
> >
{ContentChild} {ContentChild}
</div> </div>
{ContentFooter && ( {ContentFooter && (
<div className="flex flex-row-reverse">{ContentFooter}</div> <div className="flex flex-row-reverse flex-shrink-0">{ContentFooter}</div>
)} )}
</ModalContent> </ModalContent>
</Modal> </Modal>
) : ( ) : (
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
{triggerChild} {triggerChild}
<DialogContent className={cn(minWidth, "duration-300")}> <DialogContent className={cn(minWidth, height, "duration-300")}>
<div className="truncate-doubleline word-break-break-word"> <div className="truncate-doubleline flex-shrink-0 word-break-break-word">
{headerChild} {headerChild}
</div> </div>
<div <div
className={`flex flex-col ${height!} w-full transition-all duration-300`} className={`flex flex-col h-full w-full transition-all duration-300`}
> >
{ContentChild} {ContentChild}
</div> </div>
{ContentFooter && ( {ContentFooter && (
<div className="flex flex-row-reverse">{ContentFooter}</div> <div className="flex flex-row-reverse flex-shrink-0">{ContentFooter}</div>
)} )}
</DialogContent> </DialogContent>
</Dialog> </Dialog>