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/MailFolderTree.tsx

@@ -147,7 +147,7 @@ function FolderNode({
         <button
           onClick={() => onSelect(folder.id)}
           className={clsx(
-            'flex-1 flex items-center gap-2 px-2 py-2 md:py-1.5 rounded-md text-sm min-h-touch',
+            'flex-1 flex items-center gap-1.5 px-2 py-1 md:py-1 rounded-md text-sm min-h-touch',
             'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
             isSelected
               ? 'bg-primary-50 text-primary-700 font-medium'

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 && (