bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Give modals max height

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-08-24 14:15:50 +02:00
parent fb4c676e72
commit cea02b161c
1 changed files with 69 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/ui/modal/modal.tsx
View file

@ -100,14 +100,13 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
<div <div
ref={ref} ref={ref}
data-testid='modal' data-testid='modal'
className={clsx(className, 'pointer-events-auto relative mx-auto block w-full rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out black:bg-black dark:bg-primary-900 dark:text-gray-100', widths[width], { className={clsx(className, 'pointer-events-auto relative mx-auto flex max-h-[90vh] w-full flex-col overflow-auto rounded-2xl bg-white text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out black:bg-black md:max-h-[80vh] dark:bg-primary-900 dark:text-gray-100', widths[width], {
'bottom-0': !firstRender, 'bottom-0': !firstRender,
'-bottom-32': firstRender, '-bottom-32': firstRender,
})} })}
> >
<div className='w-full justify-between sm:flex sm:items-start'>
<div className='w-full'>
{title && ( {title && (
<div className='sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur black:bg-black/80 dark:bg-primary-900/75'>
<div <div
className={clsx('flex w-full items-center gap-2', { className={clsx('flex w-full items-center gap-2', {
'flex-row-reverse': closePosition === 'left', 'flex-row-reverse': closePosition === 'left',
@ -135,15 +134,12 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
/> />
)} )}
</div> </div>
</div>
)} )}
<div className={clsx('p-6', { 'pt-0': title })}>
{title ? ( <div className='w-full'>
<div className='mt-2 w-full'>
{children} {children}
</div> </div>
) : children}
</div>
</div>
{confirmationAction && ( {confirmationAction && (
<HStack className='mt-5' justifyContent='between' data-testid='modal-actions'> <HStack className='mt-5' justifyContent='between' data-testid='modal-actions'>
@ -182,6 +178,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
</HStack> </HStack>
)} )}
</div> </div>
</div>
); );
}); });