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; } - -.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; +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::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 7.5px; + border-left: 1px dashed var(--border-color-primary); }