fix: tighter folder tree, smaller mail list font, smooth resize via DOM ref

- MailFolderTree: reduce padding/gap ~25% (py-2→py-1, gap-2→gap-1.5)
- MailList: text-sm→text-xs for from and subject lines
- ResizablePanel: use DOM ref for width during drag instead of React state
  - No re-renders during drag, only single setWidth on mouseup
  - panelRef on outer div, contentRef on inner div
  - pointer-events:none on content during drag
  - contain:strict on content area

frontend/src/components/mail/MailList.tsx

@@ -184,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')}>
+                      <span className={clsx('text-xs truncate', !mail.is_seen ? 'text-secondary-900 font-semibold' : 'text-secondary-700')}>
                         {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')}>
+                    <p className={clsx('text-xs truncate mt-0.5', !mail.is_seen ? 'text-secondary-800' : 'text-secondary-600')}>
                       {decodeMimeHeader(mail.subject) || t('mail.noSubject')}
                     </p>
                     {mail.labels && mail.labels.length > 0 && (