Backport PR #14529: Add min width to constrain resizing in side-by-si…

…de view (#15348)

Co-authored-by: Stephanie Stattel <sstattel@bloomberg.net>

packages/cells/src/resizeHandle.ts

@@ -6,6 +6,7 @@
 import { Message } from '@lumino/messaging';
 import { Throttler } from '@lumino/polling';
 import { Widget } from '@lumino/widgets';
+import { Signal } from '@lumino/signaling';
 
 const RESIZE_HANDLE_CLASS = 'jp-CellResizeHandle';
 
@@ -104,10 +105,16 @@ export class ResizeHandle extends Widget {
         '--jp-side-by-side-output-size',
         `${normalized}fr`
       );
+      this.sizeChanged.emit(normalized);
     }
   }
 
   private _isActive = false;
   private _isDragging = false;
   private _resizer: Throttler<void, void, [MouseEvent]>;
+
+  /**
+   * A public signal used to indicate the size of the cell and output has changed.
+   */
+  readonly sizeChanged = new Signal<this, number>(this);
 }

packages/cells/src/widget.ts

@@ -1064,7 +1064,9 @@ export class CodeCell extends Cell<ICodeCellModel> {
     this._output.outputLengthChanged.connect(this._outputLengthHandler, this);
     outputWrapper.addWidget(this._output);
     const layout = this.layout as PanelLayout;
-    layout.insertWidget(layout.widgets.length - 1, new ResizeHandle(this.node));
+    const resizeHandle = new ResizeHandle(this.node);
+    resizeHandle.sizeChanged.connect(this._sizeChangedHandler, this);
+    layout.insertWidget(layout.widgets.length - 1, resizeHandle);
     layout.insertWidget(layout.widgets.length - 1, outputWrapper);
 
     if (this.model.isDirty) {
@@ -1468,6 +1470,13 @@ export class CodeCell extends Cell<ICodeCellModel> {
     this.node.setAttribute('aria-label', ariaLabel);
   }
 
+  /**
+   * Handle changes in input/output proportions in side-by-side mode.
+   */
+  private _sizeChangedHandler(sender: ResizeHandle) {
+    this._displayChanged.emit();
+  }
+
   private _headingsCache: Cell.IHeading[] | null = null;
   private _rendermime: IRenderMimeRegistry;
   private _outputHidden = false;

packages/notebook/style/base.css

@@ -318,8 +318,8 @@
 
 .jp-mod-sideBySide.jp-Notebook .jp-CodeCell {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) min-content minmax(
-      0,
+  grid-template-columns: minmax(70px, 1fr) min-content minmax(
+      70px,
       var(--jp-side-by-side-output-size)
     );
   grid-template-rows: auto minmax(0, 1fr) auto;
@@ -330,8 +330,8 @@
 }
 
 .jp-mod-sideBySide.jp-Notebook .jp-CodeCell.jp-mod-resizedCell {
-  grid-template-columns: minmax(0, 1fr) min-content minmax(
-      0,
+  grid-template-columns: minmax(70px, 1fr) min-content minmax(
+      70px,
       var(--jp-side-by-side-resized-cell)
     );
 }