From 7a40008c1e3846f09ac4eeadc4a50f810ffc0d90 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Mon, 20 May 2024 21:24:00 -0500
Subject: [PATCH] fix: Fix popup drag hitbox (#216)

* hotfix: Fix popup drag hitbox

Somehow, the drags get "lost" within a button element. Converting the parent container to a div works to fix this.

* refactor: Update styling
---
 .../common/ExtensionRoot/ExtensionRoot.module.scss        | 4 ++++
 src/views/components/common/PopupCourseBlock.tsx          | 8 ++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
index 11806372..7a54f131 100644
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
@@ -13,4 +13,8 @@
 .extensionRoot {
     @apply font-sans h-full;
     color: #303030;
+
+    [data-rfd-drag-handle-context-id=':r1:'] {
+        cursor: move;
+    }
 }
diff --git a/src/views/components/common/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock.tsx
index 5b0dbcfc..7130d4ac 100644
--- a/src/views/components/common/PopupCourseBlock.tsx
+++ b/src/views/components/common/PopupCourseBlock.tsx
@@ -42,12 +42,12 @@ export default function PopupCourseBlock({
     };
 
     return (
-        <button
+        <div
             style={{
                 backgroundColor: colors.primaryColor,
             }}
             className={clsx(
-                'h-full w-full inline-flex items-center justify-center gap-1 rounded pr-3 cursor-pointer focusable text-left',
+                'h-full w-full inline-flex items-center justify-center gap-1 rounded pr-3 focusable cursor-pointer text-left',
                 className
             )}
             onClick={handleClick}
@@ -56,7 +56,7 @@ export default function PopupCourseBlock({
                 style={{
                     backgroundColor: colors.secondaryColor,
                 }}
-                className='flex cursor-move items-center self-stretch rounded rounded-r-0'
+                className='flex items-center self-stretch rounded rounded-r-0 cursor-move!'
                 {...dragHandleProps}
             >
                 <DragIndicatorIcon className='h-6 w-6 text-white' />
@@ -75,6 +75,6 @@ export default function PopupCourseBlock({
                     <StatusIcon status={course.status} className='h-5 w-5' />
                 </div>
             )}
-        </button>
+        </div>
     );
 }