Fix for resizeable handle z-index

Author: samejr

apps/webapp/app/components/primitives/Resizable.tsx

@@ -25,36 +25,42 @@ const ResizableHandle = ({
   withHandle?: boolean;
 }) => (
   <PanelResizer
+    onMouseDown={(e: React.MouseEvent) => {
+      e.preventDefault();
+    }}
     className={cn(
-      // Base styles
       "group relative flex items-center justify-center focus-custom",
-      // Horizontal orientation (default)
-      "w-0.75 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
-      // Vertical orientation
+      // Horizontal size
+      "w-0.75",
+      // Vertical size
       "data-[handle-orientation=vertical]:h-0.75 data-[handle-orientation=vertical]:w-full",
+      // Normal-state line (::before) — 1px, centered in the 3px handle
+      "before:absolute before:left-px before:top-0 before:h-full before:w-px before:bg-grid-bright",
+      "data-[handle-orientation=vertical]:before:left-0 data-[handle-orientation=vertical]:before:top-px data-[handle-orientation=vertical]:before:h-px data-[handle-orientation=vertical]:before:w-full",
+      // Hit area (::after pseudo) for easier grabbing
+      "after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2",
       "data-[handle-orientation=vertical]:after:inset-x-0 data-[handle-orientation=vertical]:after:inset-y-auto",
       "data-[handle-orientation=vertical]:after:left-0 data-[handle-orientation=vertical]:after:top-1/2",
-      "data-[handle-orientation=vertical]:after:h-1 data-[handle-orientation=vertical]:after:w-full",
+      "data-[handle-orientation=vertical]:after:h-3 data-[handle-orientation=vertical]:after:w-full",
       "data-[handle-orientation=vertical]:after:-translate-y-1/2 data-[handle-orientation=vertical]:after:translate-x-0",
       className
     )}
     size="3px"
     {...props}
   >
-    {/* Horizontal orientation line indicator */}
-    <div className="absolute left-[0.0625rem] top-0 z-20 h-full w-px bg-grid-bright transition group-hover:left-0 group-hover:w-0.75 group-hover:bg-indigo-500 group-data-[handle-orientation=vertical]:hidden" />
-    {/* Vertical orientation line indicator */}
-    <div className="absolute left-0 top-[0.0625rem] z-20 hidden h-px w-full bg-grid-bright transition group-hover:top-0 group-hover:h-0.75 group-hover:bg-indigo-500 group-data-[handle-orientation=vertical]:block" />
+    {/* Indigo hover overlay — absolutely positioned on top of everything */}
+    <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-0.75 bg-indigo-500 opacity-0 transition-opacity group-hover:opacity-100 group-data-[handle-orientation=vertical]:hidden" />
+    <div className="pointer-events-none absolute left-0 top-0 z-10 hidden h-0.75 w-full bg-indigo-500 opacity-0 transition-opacity group-hover:opacity-100 group-data-[handle-orientation=vertical]:block" />
     {withHandle && (
       <>
         {/* Horizontal orientation dots (vertical arrangement) */}
-        <div className="z-10 flex h-5 w-0.75 flex-col items-center justify-center gap-[0.1875rem] bg-background-dimmed group-hover:hidden group-data-[handle-orientation=vertical]:hidden">
+        <div className="relative z-[1] flex h-5 w-0.75 flex-col items-center justify-center gap-[0.1875rem] bg-background-dimmed transition-opacity group-hover:opacity-0 group-data-[handle-orientation=vertical]:hidden">
           {Array.from({ length: 3 }).map((_, index) => (
             <div key={index} className="h-[0.1875rem] w-0.75 rounded-full bg-charcoal-600" />
           ))}
         </div>
         {/* Vertical orientation dots (horizontal arrangement) */}
-        <div className="z-10 hidden h-0.75 w-5 flex-row items-center justify-center gap-[0.1875rem] bg-background-dimmed group-hover:hidden group-data-[handle-orientation=vertical]:flex">
+        <div className="relative z-[1] hidden h-0.75 w-5 flex-row items-center justify-center gap-[0.1875rem] bg-background-dimmed transition-opacity group-hover:opacity-0 group-data-[handle-orientation=vertical]:flex">
           {Array.from({ length: 3 }).map((_, index) => (
             <div key={index} className="h-0.75 w-[0.1875rem] rounded-full bg-charcoal-600" />
           ))}