feat: mobile-responsive mail plugin UI

frontend/src/components/mail/ComposeModal.tsx

@@ -151,7 +151,7 @@ export function ComposeModal({
   const title = mode === 'reply' ? t('mail.reply') : mode === 'forward' ? t('mail.forward') : t('mail.compose');
 
   return (
-    <Modal open={open} onClose={onClose} title={title} size="xl" closeOnBackdrop={false}>
+    <Modal open={open} onClose={onClose} title={title} size="xl" closeOnBackdrop={false} fullScreenMobile>
       <div className="space-y-4" data-testid="compose-modal">
         {/* Toolbar */}
         <div className="flex items-center gap-1 border-b border-secondary-200 pb-2" data-testid="compose-toolbar">
@@ -225,7 +225,7 @@ export function ComposeModal({
                 {t('mail.showCcBcc')}
               </button>
             ) : (
-              <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-2">
+              <div className="w-full grid grid-cols-1 sm:grid-cols-2 gap-2">
                 <Input
                   label={t('mail.cc')}
                   value={cc}
@@ -278,7 +278,7 @@ export function ComposeModal({
         />
 
         {/* Actions */}
-        <div className="flex justify-end gap-2 pt-2 border-t border-secondary-200">
+        <div className="flex justify-end gap-2 pt-2 border-t border-secondary-200 sticky bottom-0 bg-white py-3">
           <Button variant="secondary" onClick={onClose} type="button">
             {t('common.cancel')}
           </Button>