feat: mobile-responsive mail plugin UI

frontend/src/components/mail/MailList.tsx

@@ -73,7 +73,7 @@ export function MailList({
             <button
               onClick={() => onSelectMail(mail)}
               className={clsx(
-                'w-full text-left px-4 py-3 hover:bg-secondary-50 min-h-touch motion-safe:transition-colors',
+                'w-full text-left px-3 py-2 md:px-4 md:py-3 hover:bg-secondary-50 min-h-touch motion-safe:transition-colors',
                 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
                 mail.id === selectedMailId && 'bg-primary-50',
                 !mail.is_seen && 'font-semibold',
@@ -102,7 +102,7 @@ export function MailList({
                     </span>
                     <span className="text-xs text-secondary-400 flex-shrink-0">{formatDate(mail.date)}</span>
                   </div>
-                  <p className={clsx('text-sm truncate mt-0.5', !mail.is_seen ? 'text-secondary-800' : 'text-secondary-600')}>
+                  <p className={clsx('text-xs md:text-sm truncate mt-0.5', !mail.is_seen ? 'text-secondary-800' : 'text-secondary-600')}>
                     {mail.subject || t('mail.noSubject')}
                   </p>
                   {mail.labels && mail.labels.length > 0 && (