feat: mobile-responsive mail plugin UI

frontend/src/components/ui/Modal.tsx

@@ -10,6 +10,7 @@ export interface ModalProps {
   closeOnBackdrop?: boolean;
   closeOnEscape?: boolean;
   showCloseButton?: boolean;
+  fullScreenMobile?: boolean;
 }
 
 const sizeClasses = {
@@ -28,6 +29,7 @@ export function Modal({
   closeOnBackdrop = true,
   closeOnEscape = true,
   showCloseButton = true,
+  fullScreenMobile = false,
 }: ModalProps) {
   const dialogRef = useRef<HTMLDivElement>(null);
   const previouslyFocused = useRef<HTMLElement | null>(null);
@@ -60,7 +62,10 @@ export function Modal({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      className={clsx(
+        'fixed inset-0 z-50 flex items-center justify-center',
+        fullScreenMobile ? 'p-0 md:p-4' : 'p-4'
+      )}
       role="dialog"
       aria-modal="true"
       aria-labelledby={title ? 'modal-title' : undefined}
@@ -76,12 +81,14 @@ export function Modal({
         className={clsx(
           'relative bg-white rounded-lg shadow-xl w-full',
           'motion-safe:animate-scale',
+          fullScreenMobile && 'h-full md:h-auto md:max-h-[85vh]',
+          fullScreenMobile ? 'rounded-none md:rounded-lg' : '',
           sizeClasses[size]
         )}
       >
         {title && (
-          <div className="px-6 py-4 border-b border-secondary-200">
-            <h2 id="modal-title" className="text-lg font-semibold text-secondary-900">
+          <div className="px-4 py-3 md:px-6 md:py-4 border-b border-secondary-200">
+            <h2 id="modal-title" className="text-base md:text-lg font-semibold text-secondary-900">
               {title}
             </h2>
           </div>
@@ -89,7 +96,7 @@ export function Modal({
         {showCloseButton && (
           <button
             onClick={onClose}
-            className="absolute top-4 right-4 text-secondary-400 hover:text-secondary-600 min-h-touch min-w-touch flex items-center justify-center rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+            className="absolute top-3 right-3 md:top-4 md:right-4 text-secondary-400 hover:text-secondary-600 min-h-touch min-w-touch flex items-center justify-center rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
             aria-label="Close dialog"
           >
             <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
@@ -97,7 +104,10 @@ export function Modal({
             </svg>
           </button>
         )}
-        <div className="px-6 py-4 max-h-[70vh] overflow-y-auto">
+        <div className={clsx(
+          'px-4 py-4 md:px-6 overflow-y-auto',
+          fullScreenMobile ? 'max-h-none md:max-h-[70vh] h-full md:h-auto' : 'max-h-[70vh]'
+        )}>
           {children}
         </div>
       </div>