fix the resize handle for cells

packages/cells/src/resizeHandle.ts

@@ -11,7 +11,6 @@ const CELL_RESIZED_CLASS = 'jp-mod-resizedCell';
 export class ResizeHandle extends Widget {
   private _isActive: boolean = false;
   private _isDragging: boolean = false;
-  private _mouseOffset: number;
   private _protectedWidth = 10;
 
   constructor(protected targetNode: HTMLElement) {
@@ -45,15 +44,13 @@ export class ResizeHandle extends Widget {
         });
 
         document.documentElement.style.setProperty(
-          '--jp-side-by-side-resized-cell',
-          ''
+          '--jp-side-by-side-output-size',
+          '1fr'
         );
 
         this._isActive = false;
         break;
       case 'mousedown':
-        this._mouseOffset =
-          (event as MouseEvent).clientX - this.node.getBoundingClientRect().x;
         this._isDragging = true;
         if (!this._isActive) {
           this.targetNode.parentNode?.childNodes.forEach(node => {
@@ -70,24 +67,17 @@ export class ResizeHandle extends Widget {
           return;
         }
         const targetRect = this.targetNode.getBoundingClientRect();
-        const inputWidth =
-          (event as MouseEvent).clientX - targetRect.x - this._mouseOffset;
 
-        const resized_ratio =
-          1 -
-          Math.min(
-            Math.max(inputWidth, this._protectedWidth),
-            targetRect.width - this._protectedWidth
-          ) /
-            (targetRect.width - this._protectedWidth);
+        const width = targetRect.width - this._protectedWidth * 2;
+        const position =
+          (event as MouseEvent).clientX - targetRect.x - this._protectedWidth;
 
-        // Added friction to the dragging interaction
-        if (Math.round(resized_ratio * 100) % 10 == 0) {
-          document.documentElement.style.setProperty(
-            '--jp-side-by-side-resized-cell',
-            resized_ratio + 'fr'
-          );
-        }
+        const outputRatio = width / position - 1;
+
+        document.documentElement.style.setProperty(
+          '--jp-side-by-side-output-size',
+          `${outputRatio}fr`
+        );
 
         break;
       }