Side-by-side rendering in Firefox doesn't show input and output; graphics glitches when dragging resize handle

[JasonWeill]

Description

In Firefox, on tip-of-master, when I switch to side-by-side rendering, I see a really distorted view, and as I grab the divider and drag it to the right, I see some additional graphic weirdness until I get about halfway across. See video below.

Screen.Recording.2023-01-23.at.3.59.35.PM.mov

This occurs even in a private browsing window in Firefox, with extensions disabled. I tried unsuccessfully to reproduce this in Chrome. A teammate was unable to repro with JupyterLab 3.5.3.

Reproduce

1. Open a notebook in Firefox.
2. Select View > Render Side-by-Side.
3. Observe that only the output column is visible.
4. Click and drag the divider between input and output to the right.
5. Observe that the input column rapidly changes from very small to the expected width, until the resize handle is dragged about halfway across the window.

Expected behavior

Initial appearance shows input and output columns, each roughly half the width of the main area.

Context

• Operating System and version: macOS 12.6.2 "Monterey"
• Browser and version: Firefox 102.7.0esr
• JupyterLab version: tip-of-master (4.0.0a32)

Troubleshoot Output

Paste the output from running `jupyter troubleshoot` from the command line here.
You may want to sanitize the paths in the output.

Command Line Output

Paste the output from your command line running `jupyter lab` here, use `--debug` if possible.

Browser Output

Paste the output from your browser Javascript console here, if applicable.

[andrii-i]

Reproduced in:

Operating System and version: MacOS 12.6.2
Browser and version: Firefox 102.6.0esr (64-bit)
JupyterLab version: tip-of-master (4.0.0a32)