fix(mail): sync Object error, MIME subject decoding, sticky compact pagination

- Fix sync error: backend returns {synced, error?} not {success, synced_count}; frontend now checks error field
- Decode MIME encoded-words (=?UTF-8?Q?...?=) in backend during IMAP sync for subject/from/to/cc headers
- Add frontend decodeMimeHeader() utility for already-stored encoded subjects (MailList + MailDetail)
- Make pagination sticky at bottom of mail list (flex-col h-full, ul scrolls, pagination flex-shrink-0)
- Make pagination compact: smaller padding (px-1.5 py-0.5), text-xs, smaller icons, tighter spacing

frontend/src/components/mail/MailList.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { Mail } from '@/api/mail';
+import { decodeMimeHeader } from '@/api/mail';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { Pagination } from '@/components/ui/Pagination';
 
@@ -89,9 +90,9 @@ export function MailList({
   }
 
   return (
-    <div data-testid="mail-list" role="listbox" aria-label={t('mail.selectMail')}>
+    <div className="flex flex-col h-full" data-testid="mail-list" role="listbox" aria-label={t('mail.selectMail')}>
       {/* Select-all header */}
-      <div className="flex items-center gap-2 px-3 py-2 md:px-4 md:py-2 border-b border-secondary-200 bg-secondary-50">
+      <div className="flex items-center gap-2 px-3 py-2 md:px-4 md:py-2 border-b border-secondary-200 bg-secondary-50 flex-shrink-0">
         <input
           type="checkbox"
           checked={allSelected}
@@ -108,7 +109,7 @@ export function MailList({
       </div>
       {/* Sort header */}
       {onSortChange && (
-        <div className="flex items-center gap-2 px-3 py-1.5 md:px-4 border-b border-secondary-200 bg-secondary-50" data-testid="mail-sort-bar">
+        <div className="flex items-center gap-2 px-3 py-1.5 md:px-4 border-b border-secondary-200 bg-secondary-50 flex-shrink-0" data-testid="mail-sort-bar">
           <label htmlFor="mail-sort-by" className="text-xs text-secondary-600">
             {t('mail.sortBy')}:
           </label>
@@ -140,7 +141,8 @@ export function MailList({
           </button>
         </div>
       )}
-      <ul className="divide-y divide-secondary-100" role="list">
+      {/* Mail list — scrolls, pagination stays fixed */}
+      <ul className="divide-y divide-secondary-100 flex-1 overflow-y-auto" role="list">
         {mails.map((mail) => (
           <li key={mail.id} role="listitem" className={clsx(selectedMailIds.has(mail.id) && 'bg-primary-50')}>
             <div className="flex items-start gap-2">
@@ -182,12 +184,12 @@ export function MailList({
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center justify-between gap-2">
                       <span className={clsx('text-sm truncate', !mail.is_seen ? 'text-secondary-900 font-semibold' : 'text-secondary-700')}>
-                        {mail.from_name || mail.from_address}
+                        {decodeMimeHeader(mail.from_name) || mail.from_address}
                       </span>
                       <span className="text-xs text-secondary-400 flex-shrink-0">{formatDate(mail.date)}</span>
                     </div>
                     <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')}
+                      {decodeMimeHeader(mail.subject) || t('mail.noSubject')}
                     </p>
                     {mail.labels && mail.labels.length > 0 && (
                       <div className="flex gap-1 mt-1">
@@ -206,13 +208,15 @@ export function MailList({
         ))}
       </ul>
       {totalPages > 1 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          total={total}
-          pageSize={pageSize}
-          onPageChange={onPageChange}
-        />
+        <div className="flex-shrink-0">
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            total={total}
+            pageSize={pageSize}
+            onPageChange={onPageChange}
+          />
+        </div>
       )}
     </div>
   );