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/ui/ResizablePanel.tsx

@@ -6,6 +6,10 @@
  * positioned absolutely on the right edge (z-index above scrollbars).
  * Scrollable content goes into an inner div so that the scrollbar never
  * overlaps the drag handle.
+ *
+ * Performance: during drag, width is applied directly to the DOM via ref —
+ * no React re-render happens until mouseup. This prevents janky resizing
+ * when panel children (mail list, mail detail) are expensive to render.
  */
 
 import React, { useState, useRef, useCallback, useEffect } from 'react';
@@ -38,21 +42,25 @@ export function ResizablePanel({
   ...rest
 }: ResizablePanelProps) {
   const [width, setWidth] = useState(initialWidth);
-  const [isDragging, setIsDragging] = useState(false);
   const isResizing = useRef(false);
   const startX = useRef(0);
   const startWidth = useRef(0);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
 
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
       e.preventDefault();
       e.stopPropagation();
       isResizing.current = true;
-      setIsDragging(true);
       startX.current = e.clientX;
       startWidth.current = width;
       document.body.style.cursor = 'col-resize';
       document.body.style.userSelect = 'none';
+      // Disable pointer events on content during drag to prevent reflows
+      if (contentRef.current) {
+        contentRef.current.style.pointerEvents = 'none';
+      }
     },
     [width],
   );
@@ -62,15 +70,27 @@ export function ResizablePanel({
       if (!isResizing.current) return;
       const delta = e.clientX - startX.current;
       const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth.current + delta));
-      setWidth(newWidth);
+      // Apply width directly to DOM — no React re-render during drag
+      if (panelRef.current) {
+        panelRef.current.style.width = `${newWidth}px`;
+      }
     };
 
     const handleMouseUp = () => {
       if (isResizing.current) {
         isResizing.current = false;
-        setIsDragging(false);
         document.body.style.cursor = '';
         document.body.style.userSelect = '';
+        if (contentRef.current) {
+          contentRef.current.style.pointerEvents = '';
+        }
+        // Sync final width to React state (single re-render on mouseup)
+        if (panelRef.current) {
+          const finalWidth = panelRef.current.style.width;
+          if (finalWidth) {
+            setWidth(parseInt(finalWidth));
+          }
+        }
       }
     };
 
@@ -85,6 +105,7 @@ export function ResizablePanel({
 
   return (
     <div
+      ref={panelRef}
       className={clsx(
         resizable ? 'relative flex-shrink-0 flex flex-col' : 'relative flex-1 flex flex-col',
         className,
@@ -94,11 +115,10 @@ export function ResizablePanel({
     >
       {/* Inner scrollable content area — scrollbar stays inside, never overlaps handle */}
       <div
+        ref={contentRef}
         className="flex-1 overflow-y-auto overflow-x-hidden min-h-0"
         style={{
           contain: 'strict',
-          pointerEvents: isDragging ? 'none' : 'auto',
-          willChange: isDragging ? 'width' : undefined,
         }}
       >
         {children}