Change:
Notice the cell goes beyond the right margin. Seems to happen for all cells
is it related to the indentation change?
I don't think there's an issue here anymore? I did push a change to ensure that a line of text with no whitespace will break and not overflow. But I don't see any other issues with overflowing horizontally. I do see plain text outputs overflowing if I resize the editor to be narrower...

Discussion:
index: number; } <ins> interface IRenderedOutput { element: HTMLElement; renderResult: IRenderOutput; } </ins> export class CodeCell extends Disposable { private outputResizeListeners = new Map<IProcessedOutput, DisposableStore>(); <del> private outputElements = new Map<IProcessedOutput, HTMLElement>(); </del> <ins> private outputElements = new Map<IProcessedOutput, IRenderedOutput>(); </ins> constructor( private notebookEditor: INotebookEditor, private viewCell: CodeCellViewModel,

// already removed removedKeys.push(key); // remove element from DOM <del> this.templateData?.outputContainer?.removeChild(value); </del> <ins> this.templateData?.outputContainer?.removeChild(value.element); </ins> this.notebookEditor.removeInset(key); } });

[...this.viewCell.outputs].reverse().forEach(output => { if (this.outputElements.has(output)) { // already exist <del> prevElement = this.outputElements.get(output); </del> <ins> prevElement = this.outputElements.get(output)!.element; </ins> return; } // newly added element let currIndex = this.viewCell.outputs.indexOf(output); this.renderOutput(output, currIndex, prevElement); <del> prevElement = this.outputElements.get(output); </del> <ins> prevElement = this.outputElements.get(output)!.element; </ins> }); let editorHeight = templateData.editor!.getContentHeight();

const index = viewCell.outputs.indexOf(key); if (index >= 0) { const top = this.viewCell.getOutputOffsetInContainer(index); <del> value.style.top = `${top}px`; </del> <ins> value.element.style.top = `${top}px`; </ins> } });

height: realContentHeight } ); <ins> this.viewCell.outputs.forEach((o, i) => { const renderedOutput = this.outputElements.get(o); if (renderedOutput && !renderedOutput.renderResult.hasDynamicHeight && !renderedOutput.renderResult.shadowContent) { this.viewCell.updateOutputHeight(i, renderedOutput.element.clientHeight); } }); </ins> } private onCellHeightChange(newHeight: number): void {

return; } <del> this.outputElements.set(currOutput, outputItemDiv); </del> <ins> this.outputElements.set(currOutput, { element: outputItemDiv, renderResult: result }); </ins> if (beforeElement) { this.templateData.outputContainer?.insertBefore(outputItemDiv, beforeElement);

if (pick !== currIndex) { // user chooses another mimetype let index = this.viewCell.outputs.indexOf(output); <del> let nextElement = index + 1 < this.viewCell.outputs.length ? this.outputElements.get(this.viewCell.outputs[index + 1]) : undefined; </del> <ins> let nextElement = index + 1 < this.viewCell.outputs.length ? this.outputElements.get(this.viewCell.outputs[index + 1])?.element : undefined; </ins> this.outputResizeListeners.get(output)?.clear(); <del> let element = this.outputElements.get(output); </del> <ins> let element = this.outputElements.get(output)?.element; </ins> if (element) { this.templateData?.outputContainer?.removeChild(element); this.notebookEditor.removeInset(output);