From 214dc87b1f58724fef6d6443587b4d7b5a4e8758 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 16 Oct 2025 18:44:48 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20narrow=20"alert"=20?=
 =?UTF-8?q?dialog=20mode=20for=20concise=20messages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce new narrow-width alert dialog variant to improve
readability of short messages by preventing excessively
long line lengths that occur when brief alerts use
standard dialog widths.
---
 src/frontend/src/primitives/Box.tsx    | 4 ++++
 src/frontend/src/primitives/Dialog.tsx | 9 +++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/primitives/Box.tsx b/src/frontend/src/primitives/Box.tsx
index 7770c44c..063740d5 100644
--- a/src/frontend/src/primitives/Box.tsx
+++ b/src/frontend/src/primitives/Box.tsx
@@ -28,6 +28,10 @@ const box = cva({
         width: '30rem',
         maxWidth: '100%',
       },
+      alert: {
+        width: '24rem',
+        maxWidth: '100%',
+      },
     },
     variant: {
       light: {
diff --git a/src/frontend/src/primitives/Dialog.tsx b/src/frontend/src/primitives/Dialog.tsx
index bdaad12e..4b0cc523 100644
--- a/src/frontend/src/primitives/Dialog.tsx
+++ b/src/frontend/src/primitives/Dialog.tsx
@@ -80,7 +80,7 @@ export type DialogProps = RACDialogProps & {
    * after user interaction
    */
   onOpenChange?: (isOpen: boolean) => void
-  type?: 'flex'
+  type?: 'flex' | 'alert'
   innerRef?: MutableRefObject<HTMLDivElement | null>
   size?: 'full' | 'large'
 }
@@ -96,7 +96,12 @@ export const Dialog = ({
   ...dialogProps
 }: DialogProps) => {
   const isAlert = dialogProps['role'] === 'alertdialog'
-  const boxType = dialogProps['type'] !== 'flex' ? 'dialog' : undefined
+  const boxType =
+    dialogProps['type'] === 'alert'
+      ? 'alert'
+      : dialogProps['type'] !== 'flex'
+        ? 'dialog'
+        : undefined
   return (
     <StyledModalOverlay
       isKeyboardDismissDisabled={isAlert}