diff --git a/website/src/lib/components/Resizer.svelte b/website/src/lib/components/Resizer.svelte
index 63974a596..f8193eed0 100644
--- a/website/src/lib/components/Resizer.svelte
+++ b/website/src/lib/components/Resizer.svelte
@@ -12,6 +12,19 @@
     } = $props();
 
     function handleMouseDown(event: PointerEvent) {
+        // the text on either side is not selected while dragging, and the cursor stays the one of
+        // the resizer when the pointer leaves it
+        event.preventDefault();
+        const { style } = document.body;
+        const previous = {
+            userSelect: style.userSelect,
+            webkitUserSelect: style.webkitUserSelect,
+            cursor: style.cursor,
+        };
+        style.userSelect = 'none';
+        style.webkitUserSelect = 'none';
+        style.cursor = orientation === 'col' ? 'col-resize' : 'row-resize';
+
         const startX = event.clientX;
         const startY = event.clientY;
         const startAfter = after;
@@ -32,10 +45,13 @@
         const handleMouseUp = () => {
             window.removeEventListener('pointermove', handleMouseMove);
             window.removeEventListener('pointerup', handleMouseUp);
+            window.removeEventListener('pointercancel', handleMouseUp);
+            Object.assign(style, previous);
         };
 
         window.addEventListener('pointermove', handleMouseMove);
         window.addEventListener('pointerup', handleMouseUp);
+        window.addEventListener('pointercancel', handleMouseUp);
     }
 </script>