From 21e2a67c1eb704310459aeaa2575a1200ca7471c Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 15 May 2025 07:10:08 -0700
Subject: [PATCH] Fix sidebar scroll drag

https://feedback.yaak.app/p/endpoinst-scrollbar-not-clickable
---
 src-web/components/ResizeHandle.tsx    |  4 ++--
 src-web/components/Workspace.tsx       |  2 +-
 src-web/components/core/Checkbox.tsx   | 10 ++++++----
 src-web/components/core/PairEditor.tsx | 22 +++++++++++-----------
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src-web/components/ResizeHandle.tsx b/src-web/components/ResizeHandle.tsx
index 1b204539..027b4275 100644
--- a/src-web/components/ResizeHandle.tsx
+++ b/src-web/components/ResizeHandle.tsx
@@ -32,8 +32,8 @@ export function ResizeHandle({
       className={classNames(
         className,
         'group z-10 flex select-none',
-        // 'bg-fg-info', // For debugging
-        vertical ? 'w-full h-3 cursor-row-resize' : 'h-full w-3 cursor-col-resize',
+        // 'bg-info', // For debugging
+        vertical ? 'w-full h-2 cursor-row-resize' : 'h-full w-2 cursor-col-resize',
         justify === 'center' && 'justify-center',
         justify === 'end' && 'justify-end',
         justify === 'start' && 'justify-start',
diff --git a/src-web/components/Workspace.tsx b/src-web/components/Workspace.tsx
index 5d49623c..838f483b 100644
--- a/src-web/components/Workspace.tsx
+++ b/src-web/components/Workspace.tsx
@@ -163,7 +163,7 @@ export function Workspace() {
             </ErrorBoundary>
           </div>
           <ResizeHandle
-            className="-translate-x-3"
+            className="-translate-x-0.5"
             justify="end"
             side="right"
             isResizing={isResizing}
diff --git a/src-web/components/core/Checkbox.tsx b/src-web/components/core/Checkbox.tsx
index 843d7a17..222f7d54 100644
--- a/src-web/components/core/Checkbox.tsx
+++ b/src-web/components/core/Checkbox.tsx
@@ -31,7 +31,7 @@ export function Checkbox({
     <HStack
       as="label"
       alignItems="center"
-      space={2}
+      space={3}
       className={classNames(className, 'text-text mr-auto')}
     >
       <div className={classNames(inputWrapperClassName, 'x-theme-input', 'relative flex')}>
@@ -56,9 +56,11 @@ export function Checkbox({
           />
         </div>
       </div>
-      <div className={classNames(fullWidth && 'w-full', disabled && 'opacity-disabled')}>
-        {!hideLabel && title}
-      </div>
+      {!hideLabel && (
+        <div className={classNames(fullWidth && 'w-full', disabled && 'opacity-disabled')}>
+          {title}
+        </div>
+      )}
       {help && <IconTooltip content={help} />}
     </HStack>
   );
diff --git a/src-web/components/core/PairEditor.tsx b/src-web/components/core/PairEditor.tsx
index 56a7da2e..ff15e2c0 100644
--- a/src-web/components/core/PairEditor.tsx
+++ b/src-web/components/core/PairEditor.tsx
@@ -221,7 +221,7 @@ export const PairEditor = forwardRef<PairEditorRef, PairEditorProps>(function Pa
         'pb-2 mb-auto h-full',
         !noScroll && 'overflow-y-auto max-h-full',
         // Move over the width of the drag handle
-        '-ml-3 -mr-2 pr-2',
+        '-mr-2 pr-2',
         // Pad to make room for the drag divider
         'pt-0.5',
       )}
@@ -458,26 +458,26 @@ function PairEditorRow({
         !pair.enabled && 'opacity-60',
       )}
     >
+      <Checkbox
+        hideLabel
+        title={pair.enabled ? 'Disable item' : 'Enable item'}
+        disabled={isLast}
+        checked={isLast ? false : !!pair.enabled}
+        className={classNames(isLast && '!opacity-disabled')}
+        onChange={handleChangeEnabled}
+      />
       {!isLast ? (
         <div
           className={classNames(
-            'py-2 h-7 w-3 flex items-center',
+            'py-2 h-7 w-4 flex items-center',
             'justify-center opacity-0 group-hover:opacity-70',
           )}
         >
           <Icon size="sm" icon="grip_vertical" className="pointer-events-none" />
         </div>
       ) : (
-        <span className="w-3" />
+        <span className="w-4" />
       )}
-      <Checkbox
-        hideLabel
-        title={pair.enabled ? 'Disable item' : 'Enable item'}
-        disabled={isLast}
-        checked={isLast ? false : !!pair.enabled}
-        className={classNames('pr-2', isLast && '!opacity-disabled')}
-        onChange={handleChangeEnabled}
-      />
       <div
         className={classNames(
           'grid items-center',