From 0b5e48621a43ce4bbdbd11615c7dc955d1fee200 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 16 Apr 2022 19:22:24 -0700
Subject: [PATCH] fix: Show resizable border on long-hover

---
 .../Sidebar/components/ResizeBorder.ts        | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/components/Sidebar/components/ResizeBorder.ts b/app/components/Sidebar/components/ResizeBorder.ts
index 067641dd4..b73a475f4 100644
--- a/app/components/Sidebar/components/ResizeBorder.ts
+++ b/app/components/Sidebar/components/ResizeBorder.ts
@@ -4,9 +4,24 @@ const ResizeBorder = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
-  right: -6px;
-  width: 12px;
+  right: -1px;
+  width: 2px;
   cursor: col-resize;
+
+  &:hover {
+    transition-delay: 500ms;
+    transition: background 250ms ease-in-out;
+    background: ${(props) => props.theme.sidebarActiveBackground};
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: -4px;
+    width: 10px;
+  }
 `;
 
 export default ResizeBorder;