Desktop: Improve Resize Handle (#6608)

1 files changed, 28 insertions, 0 deletions

diff --git a/packages/ui/src/components/resize-handle.css b/packages/ui/src/components/resize-handle.css
index 9344402c6..088bf9215 100644
--- a/packages/ui/src/components/resize-handle.css
+++ b/packages/ui/src/components/resize-handle.css
@@ -2,12 +2,33 @@
   position: absolute;
   z-index: 10;
 
+  &::after {
+    content: "";
+    position: absolute;
+    background-color: var(--color-border-strong-base);
+    opacity: 0;
+    transition: opacity 0.15s ease-in-out;
+    border-radius: 2px;
+  }
+
+  &:hover::after,
+  &:active::after {
+    opacity: 1;
+  }
+
   &[data-direction="horizontal"] {
     inset-block: 0;
     inset-inline-end: 0;
     width: 8px;
     transform: translateX(50%);
     cursor: ew-resize;
+
+    &::after {
+      width: 3px;
+      inset-block: 0;
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
   }
 
   &[data-direction="vertical"] {
@@ -16,5 +37,12 @@
     height: 8px;
     transform: translateY(-50%);
     cursor: ns-resize;
+
+    &::after {
+      height: 3px;
+      inset-inline: 0;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
   }
 }