Major overhaul and logic cleanup.

Adds support for web serial as well.

examples/device/webusb_serial/website/divider.js

@@ -0,0 +1,38 @@
+const resizer = document.getElementById('resizer');
+const leftColumn = resizer.previousElementSibling;
+const rightColumn = resizer.nextElementSibling;
+const container = resizer.parentNode;
+
+// Minimum and maximum width for left column in px
+const minLeftWidth = 100;
+const maxLeftWidth = container.clientWidth - 100;
+
+let isResizing = false;
+
+resizer.addEventListener('mousedown', e => {
+  e.preventDefault();
+  isResizing = true;
+  document.body.style.userSelect = 'none'; // prevent text selection
+});
+
+document.addEventListener('mousemove', e => {
+  if (!isResizing) return;
+
+  // Calculate new width of left column relative to container
+  const containerRect = container.getBoundingClientRect();
+  let newLeftWidth = e.clientX - containerRect.left;
+
+  // Clamp the width
+  newLeftWidth = Math.max(minLeftWidth, Math.min(newLeftWidth, containerRect.width - minLeftWidth));
+
+  // Set the left column's flex-basis (fixed width)
+  leftColumn.style.flex = '0 0 ' + newLeftWidth + 'px';
+  rightColumn.style.flex = '1 1 0'; // fill remaining space
+});
+
+document.addEventListener('mouseup', e => {
+  if (isResizing) {
+    isResizing = false;
+    document.body.style.userSelect = ''; // restore user selection
+  }
+});