Merge pull request #12723 from MMP0/dev-resize-handle-fix

Resize handle improvements and bug fixes

2 files changed, 62 insertions, 11 deletions

diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js
index 5edecfcc..2fd3c4d2 100644
--- a/javascript/resizeHandle.js
+++ b/javascript/resizeHandle.js
@@ -66,6 +66,13 @@
         parent.insertBefore(resizeHandle, rightCol);
 
         resizeHandle.addEventListener('mousedown', (evt) => {
+            if (evt.button !== 0) return;
+
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            document.body.classList.add('resizing');
+
             R.tracking = true;
             R.parent = parent;
             R.parentWidth = parent.offsetWidth;
@@ -75,20 +82,41 @@
             R.screenX = evt.screenX;
         });
 
-        resizeHandle.addEventListener('dblclick', () => parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS);
+        resizeHandle.addEventListener('dblclick', (evt) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
+        });
 
         afterResize(parent);
     }
 
     window.addEventListener('mousemove', (evt) => {
+        if (evt.button !== 0) return;
+
         if (R.tracking) {
+            evt.preventDefault();
+            evt.stopPropagation();
+
             const delta = R.screenX - evt.screenX;
             const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
             setLeftColGridTemplate(R.parent, leftColWidth);
         }
     });
 
-    window.addEventListener('mouseup', () => R.tracking = false);
+    window.addEventListener('mouseup', (evt) => {
+        if (evt.button !== 0) return;
+
+        if (R.tracking) {
+            evt.preventDefault();
+            evt.stopPropagation();
+
+            R.tracking = false;
+
+            document.body.classList.remove('resizing');
+        }
+    });
 
 
     window.addEventListener('resize', () => {
diff --git a/style.css b/style.css
index cb12e036..47876e92 100644
--- a/style.css
+++ b/style.css
@@ -142,6 +142,11 @@ div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdo
     overflow: visible !important;

 }

 

+/* align-items isn't enough and elements may overflow in Safari. */

+.unequal-height {

+    align-content: flex-start;

+}

+

 

 /* general styled components */

 

@@ -1056,14 +1061,32 @@ div.accordions > div.input-accordion.input-accordion-open{
     top: 0.5em;

 }

 

+body.resizing {

+    cursor: col-resize !important;

+}

+

+body.resizing * {

+    pointer-events: none !important;

+}

+

+body.resizing .resize-handle {

+    pointer-events: initial !important;

+}

+

+.resize-handle {

+    position: relative;

+    cursor: col-resize;

+    grid-column: 2 / 3;

+    min-width: 16px !important;

+    max-width: 16px !important;

+    height: 100%;

+}

 

-.resize-handle{

-	cursor: col-resize;

-	grid-column: 2 / 3;

-	min-width: 8px !important;

-	max-width: 8px !important;

-	height: 100%;

-	border-left: 1px dashed var(--border-color-primary);

-	user-select: none;

-	margin-left: 8px;

+.resize-handle::after {

+    content: '';

+    position: absolute;

+    top: 0;

+    bottom: 0;

+    left: 7.5px;

+    border-left: 1px dashed var(--border-color-primary);

 }