From ccc23ff46a3843a6502b5c4c4f18988ca1a4e9f0 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 14 Aug 2024 14:03:56 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20add=20margins=20to=20D?=
 =?UTF-8?q?ialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On very small screens, Dialog were touching the screen borders.
Add a minimum margin to improve its visual appearance and ensure
better spacing.
---
 src/frontend/src/primitives/Dialog.tsx | 59 ++++++++++++--------------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/primitives/Dialog.tsx b/src/frontend/src/primitives/Dialog.tsx
index b3e077b3..de53fe02 100644
--- a/src/frontend/src/primitives/Dialog.tsx
+++ b/src/frontend/src/primitives/Dialog.tsx
@@ -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>
           )}