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

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"