fix: IMAP hierarchical folder sync, deduplication, folder tree display, resizable panel

frontend/src/components/mail/MailFolderTree.tsx

@@ -16,6 +16,12 @@ import { EmptyState } from '@/components/ui/EmptyState';
  */
 const FOLDER_NAME_MAP: Record<string, string> = {
   INBOX: 'Posteingang',
+  'INBOX.Sent': 'Gesendet',
+  'INBOX.Drafts': 'Entwürfe',
+  'INBOX.Trash': 'Papierkorb',
+  'INBOX.Archive': 'Archiv',
+  'INBOX.spam': 'Spam',
+  'INBOX.Spam': 'Spam',
   Sent: 'Gesendet',
   Drafts: 'Entwürfe',
   Spam: 'Spam',
@@ -23,11 +29,12 @@ const FOLDER_NAME_MAP: Record<string, string> = {
   Trash: 'Papierkorb',
   'Sent Items': 'Gesendet',
   'Sent Mail': 'Gesendet',
-  'Draft': 'Entwürfe',
-  'Deleted': 'Papierkorb',
+  Draft: 'Entwürfe',
+  Deleted: 'Papierkorb',
   'Deleted Items': 'Papierkorb',
   'Junk Email': 'Spam',
   'Junk E-mail': 'Spam',
+  Archive: 'Archiv',
 };
 
 /**

frontend/src/components/ui/ResizablePanel.tsx

@@ -1,6 +1,11 @@
 /**
  * ResizablePanel — a flex panel with drag-to-resize handle.
  * No external dependencies; uses React + mouse events only.
+ *
+ * The panel renders an outer fixed-width container with the resize handle
+ * 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.
  */
 
 import React, { useState, useRef, useCallback, useEffect } from 'react';
@@ -77,11 +82,17 @@ export function ResizablePanel({
 
   return (
     <div
-      className={clsx(resizable ? 'relative flex-shrink-0' : 'relative flex-1', className)}
+      className={clsx(
+        resizable ? 'relative flex-shrink-0 flex flex-col' : 'relative flex-1 flex flex-col',
+        className,
+      )}
       style={resizable ? { width: `${width}px` } : undefined}
       data-testid={rest['data-testid']}
     >
-      {children}
+      {/* Inner scrollable content area — scrollbar stays inside, never overlaps handle */}
+      <div className="flex-1 overflow-y-auto overflow-x-hidden min-h-0">
+        {children}
+      </div>
       {resizable && (
         <div
           className="absolute top-0 right-0 h-full w-1.5 cursor-col-resize bg-transparent hover:bg-primary-300 active:bg-primary-400 transition-colors z-50 pointer-events-auto"

frontend/src/pages/Mail.tsx

@@ -442,7 +442,7 @@ export function MailPage() {
           initialWidth={224}
           minWidth={150}
           maxWidth={400}
-          className="border-r border-secondary-200 overflow-y-auto bg-white"
+          className="border-r border-secondary-200 bg-white"
           data-testid="mail-folder-pane"
         >
           <div className="p-3">
@@ -461,7 +461,7 @@ export function MailPage() {
           initialWidth={320}
           minWidth={200}
           maxWidth={500}
-          className="border-r border-secondary-200 overflow-y-auto bg-white"
+          className="border-r border-secondary-200 bg-white"
           data-testid="mail-list-pane"
         >
           <MailList
@@ -479,7 +479,7 @@ export function MailPage() {
         {/* Reading pane — flex-1, not resizable */}
         <ResizablePanel
           resizable={false}
-          className="overflow-y-auto bg-white"
+          className="bg-white"
           data-testid="mail-detail-pane"
         >
           <MailDetail