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}>
{({ close }) => (
<VerticallyOffCenter>
<Div
width="fit-content"
maxWidth="full"
margin="auto"
pointerEvents="auto"
>
<Box size="sm" type={boxType}>
{!!title && (
<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')}
<Div margin="auto" width="fit-content" maxWidth="full">
<Div margin="1rem" pointerEvents="auto">
<Box size="sm" type={boxType}>
{!!title && (
<Heading
slot="title"
level={1}
className={text({ variant: 'h1' })}
>
<RiCloseLine />
</Button>
</Div>
)}
</Box>
{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 />
</Button>
</Div>
)}
</Box>
</Div>
</Div>
</VerticallyOffCenter>
)}