Merge branch '48055-web-ide-resize-handles' into 'master'

Resolve "Resize handles for Web IDE right sidebar are too thin"

Closes #48055

See merge request gitlab-org/gitlab-ce!20818

2 files changed, 17 insertions, 7 deletions

diff --git a/app/assets/javascripts/vue_shared/components/panel_resizer.vue b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
index 8c2dcc2d902..7947ae1e4da 100644
--- a/app/assets/javascripts/vue_shared/components/panel_resizer.vue
+++ b/app/assets/javascripts/vue_shared/components/panel_resizer.vue
@@ -32,7 +32,7 @@
     },
     computed: {
       className() {
-        return `drag${this.side}`;
+        return `drag-${this.side}`;
       },
       cursorStyle() {
         if (this.enabled) {
@@ -44,8 +44,15 @@
     methods: {
       resetSize(e) {
         e.preventDefault();
+        this.$emit('resize-start', this.size);
+
         this.size = this.startSize;
         this.$emit('update:size', this.size);
+
+        // End resizing on next tick so that listeners can react to DOM changes
+        this.$nextTick(() => {
+          this.$emit('resize-end', this.size);
+        });
       },
       startDrag(e) {
         if (this.enabled) {
@@ -84,7 +91,7 @@
   <div
     :class="className"
     :style="cursorStyle"
-    class="dragHandle"
+    class="drag-handle"
     @mousedown="startDrag"
     @dblclick="resetSize"
   ></div>
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index a346bd04ad3..442aef124d3 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -833,18 +833,21 @@
   }
 }
 
-.dragHandle {
+.drag-handle {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 1px;
-  background-color: $white-dark;
+  width: 4px;
 
-  &.dragright {
+  &:hover {
+    background-color: $white-normal;
+  }
+
+  &.drag-right {
     right: 0;
   }
 
-  &.dragleft {
+  &.drag-left {
     left: 0;
   }
 }