Improve splitter drag functionality and cursor handling

Author: Stelinkaa

packages/web/src/datagrid/DataGridCore.svelte

@@ -2500,14 +2500,12 @@
     padding: 0;
     margin: 0;
     background-color: var(--theme-datagrid-headercell-background);
-    overflow: hidden;
   }
   :global(.data-grid-focused) .active-header-cell {
     background-color: var(--theme-datagrid-focused-cell-background);
   }
   .filter-cell {
     text-align: left;
-    overflow: hidden;
     margin: 0;
     padding: 0;
   }

packages/web/src/utility/splitterDrag.ts

@@ -2,9 +2,13 @@ export default function splitterDrag(node, axes) {
   let resizeStart = null;
 
   const handleResizeDown = e => {
+    if (e.button !== 0) return;
+    e.preventDefault();
     resizeStart = e[axes];
     document.addEventListener('mousemove', handleResizeMove, true);
     document.addEventListener('mouseup', handleResizeEnd, true);
+    document.body.style.cursor = axes === 'clientX' ? 'col-resize' : 'row-resize';
+    document.body.style.userSelect = 'none';
   };
 
   const handleResizeMove = e => {
@@ -22,6 +26,8 @@ export default function splitterDrag(node, axes) {
     resizeStart = null;
     document.removeEventListener('mousemove', handleResizeMove, true);
     document.removeEventListener('mouseup', handleResizeEnd, true);
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
   };
 
   node.addEventListener('mousedown', handleResizeDown);
@@ -32,6 +38,8 @@ export default function splitterDrag(node, axes) {
       if (resizeStart != null) {
         document.removeEventListener('mousemove', handleResizeMove, true);
         document.removeEventListener('mouseup', handleResizeEnd, true);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
       }
     },
   };