From 4409b24e7fddaf791457c11bbf024df7e05a359b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 18 Jan 2024 13:23:02 +0100
Subject: [PATCH] fully remove drag handle overlap with panel

---
 client/src/components/Panels/FlexPanel.vue | 50 ++++++++++++++++------
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index edcaadc907ec..0b5d6d9b2830 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -50,7 +50,7 @@ const hoverDraggableOrToggle = computed(
 );
 
 const toggleLinger = 500;
-const toggleShowDelay = 800;
+const toggleShowDelay = 600;
 let showToggleTimeout: ReturnType<typeof setTimeout> | undefined;
 
 watch(
@@ -169,44 +169,66 @@ const sideClasses = computed(() => ({
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
+$border-width: 6px;
+
 .flex-panel {
     z-index: 100;
     flex-shrink: 0;
     display: flex;
     width: var(--width);
     position: relative;
-    border-color: $border-color;
-    border-width: 1px;
+    border-color: transparent;
+    border-width: $border-width;
     box-shadow: 1px 0 transparent;
     transition: border-color 0.1s, box-shadow 0.1s;
     align-items: stretch;
     flex-direction: column;
 
+    &::after {
+        content: "";
+        position: absolute;
+        height: 100%;
+        width: 1px;
+        background-color: $border-color;
+    }
+
     &.show-hover {
         border-color: $brand-info;
 
-        &.left {
-            box-shadow: 1px 0 $brand-info;
-        }
-
-        &.right {
-            box-shadow: -1px 0 $brand-info;
+        &::after {
+            background-color: $brand-info;
         }
     }
 
     &.left {
         border-right-style: solid;
 
+        &::after {
+            right: -1px;
+        }
+
         .drag-handle {
-            right: -4px;
+            right: -$border-width;
+
+            &:hover {
+                right: calc(-1 * $border-width - var(--hover-expand) / 2);
+            }
         }
     }
 
     &.right {
         border-left-style: solid;
 
+        &::after {
+            left: -1px;
+        }
+
         .drag-handle {
-            left: -4px;
+            left: -$border-width;
+
+            &:hover {
+                left: calc(-1 * $border-width - var(--hover-expand) / 2);
+            }
         }
     }
 }
@@ -214,14 +236,18 @@ const sideClasses = computed(() => ({
 .drag-handle {
     background: none;
     border: none;
+    border-radius: 0;
     position: absolute;
-    width: 10px;
+    width: $border-width;
     padding: 0;
     height: 100%;
     z-index: 10000;
 
+    --hover-expand: 4px;
+
     &:hover {
         cursor: ew-resize;
+        width: calc($border-width + var(--hover-expand));
     }
 }