From d029892d2722d3c3fda72d9e0042272048460e76 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Fri, 17 Jul 2026 23:49:19 +0200
Subject: [PATCH] fix: tighter folder tree, smaller mail list font, smooth
 resize via DOM ref
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../src/components/mail/MailFolderTree.tsx    |  2 +-
 frontend/src/components/mail/MailList.tsx     |  4 +--
 frontend/src/components/ui/ResizablePanel.tsx | 32 +++++++++++++++----
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/mail/MailFolderTree.tsx b/frontend/src/components/mail/MailFolderTree.tsx
index 491442a..bbfb490 100644
--- a/frontend/src/components/mail/MailFolderTree.tsx
+++ b/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'
diff --git a/frontend/src/components/mail/MailList.tsx b/frontend/src/components/mail/MailList.tsx
index 585f766..b3f83c9 100644
--- a/frontend/src/components/mail/MailList.tsx
+++ b/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 && (
diff --git a/frontend/src/components/ui/ResizablePanel.tsx b/frontend/src/components/ui/ResizablePanel.tsx
index 6214d81..96bc1f6 100644
--- a/frontend/src/components/ui/ResizablePanel.tsx
+++ b/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}