studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(frontend) add margins to Dialog

Browse Source 
On very small screens, Dialog were touching the screen borders.
Add a minimum margin to improve its visual appearance and ensure
better spacing.
This commit is contained in:
lebaudantoine
2024-08-14 14:03:56 +02:00
committed by aleb_the_flash
parent e3b7a1f77b
commit ccc23ff46a
1 changed files with 28 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/frontend/src/primitives/Dialog.tsx
View File

@@ -91,38 +91,35 @@ export const Dialog = ({
<StyledRACDialog {...dialogProps}> <StyledRACDialog {...dialogProps}>
{({ close }) => ( {({ close }) => (
<VerticallyOffCenter> <VerticallyOffCenter>
<Div <Div margin="auto" width="fit-content" maxWidth="full">
width="fit-content" <Div margin="1rem" pointerEvents="auto">
maxWidth="full" <Box size="sm" type={boxType}>
margin="auto" {!!title && (
pointerEvents="auto" <Heading
> slot="title"
<Box size="sm" type={boxType}> level={1}
{!!title && ( className={text({ variant: 'h1' })}
<Heading
slot="title"
level={1}
className={text({ variant: 'h1' })}
>
{title}
</Heading>
)}
{typeof children === 'function'
? children({ close })
: children}
{!isAlert && (
<Div position="absolute" top="5" right="5">
<Button
invisible
size="xs"
onPress={() => close()}
aria-label={t('closeDialog')}
> >
<RiCloseLine /> {title}
</Button> </Heading>
</Div> )}
)} {typeof children === 'function'
</Box> ? children({ close })
: children}
{!isAlert && (
<Div position="absolute" top="5" right="5">
<Button
invisible
size="xs"
onPress={() => close()}
aria-label={t('closeDialog')}
>
<RiCloseLine />
</Button>
</Div>
)}
</Box>
</Div>
</Div> </Div>
</VerticallyOffCenter> </VerticallyOffCenter>
)} )}