✨(frontend) add narrow "alert" dialog mode for concise messages

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

@@ -28,6 +28,10 @@ const box = cva({
         width: '30rem',
         maxWidth: '100%',
       },
+      alert: {
+        width: '24rem',
+        maxWidth: '100%',
+      },
     },
     variant: {
       light: {

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}