From 69a8eea1ce862266cff16fbecea40cb11ad7be26 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 14 Aug 2024 12:00:43 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20enable=20flexibl?=
 =?UTF-8?q?e=20dialog=20sizing=20temporary?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 'Box' component has a type 'dialog' which limits the Dialog size.
The default size is insufficient for larger dialogs like
the advanced settings.

To address this temporarily, I'm allowing the wrapper component to set the
Dialog size directly. This isn't ideal, but will enable better flexibility
until we finalize the user experience and dialog requirements.

I am not sure of the new props' naming introduced.
---
 src/frontend/src/primitives/Dialog.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/primitives/Dialog.tsx b/src/frontend/src/primitives/Dialog.tsx
index 02e2bf47..b3e077b3 100644
--- a/src/frontend/src/primitives/Dialog.tsx
+++ b/src/frontend/src/primitives/Dialog.tsx
@@ -60,6 +60,7 @@ export type DialogProps = RACDialogProps & {
    * after user interaction
    */
   onOpenChange?: (isOpen: boolean) => void
+  type?: 'flex'
 }
 
 export const Dialog = ({
@@ -71,6 +72,7 @@ export const Dialog = ({
   ...dialogProps
 }: DialogProps) => {
   const isAlert = dialogProps['role'] === 'alertdialog'
+  const boxType = dialogProps['type'] !== 'flex' ? 'dialog' : undefined
   return (
     <StyledModalOverlay
       isKeyboardDismissDisabled={isAlert}
@@ -95,7 +97,7 @@ export const Dialog = ({
                 margin="auto"
                 pointerEvents="auto"
               >
-                <Box size="sm" type="dialog">
+                <Box size="sm" type={boxType}>
                   {!!title && (
                     <Heading
                       slot="title"