Improve layout resizer (#240)

Co-authored-by: Gregory Schier <gschier1990@gmail.com>

src-web/components/ResizeHandle.tsx

@@ -31,7 +31,7 @@ export function ResizeHandle({
       onDoubleClick={onReset}
       className={classNames(
         className,
-        'group z-10 flex select-none',
+        'group z-10 flex select-none transition-colors hover:bg-surface-active rounded-full',
         // 'bg-info', // For debugging
         vertical ? 'w-full h-2 cursor-row-resize' : 'h-full w-2 cursor-col-resize',
         justify === 'center' && 'justify-center',

src-web/components/Workspace.tsx

@@ -173,7 +173,7 @@ export function Workspace() {
             </ErrorBoundary>
           </div>
           <ResizeHandle
-            className="-translate-x-0.5"
+            className="-translate-x-[50%]"
             justify="end"
             side="right"
             isResizing={isResizing}

src-web/components/core/SplitLayout.tsx

@@ -154,7 +154,7 @@ export function SplitLayout({
           <ResizeHandle
             style={areaD}
             isResizing={isResizing}
-            className={classNames(vertical ? '-translate-y-1.5' : '-translate-x-1.5')}
+            className={classNames(vertical ? '-translate-y-1' : '-translate-x-1')}
             onResizeStart={handleResizeStart}
             onReset={handleReset}
             side={vertical ? 'top' : 'left'}