[JLab v4a17] CodeMirror width is not limited when text overflow

[fcollonval]

Description

As can displayed in the screenshot below, codemirror editor is expanding outside the notebook panel when it contains a long line.
The horizontal scrollbar is displayed on the notebook panel. It used to be a fix width with a local (= at editor level) horizontal scrollbar when text overflow.

Reproduce

1. Open a notebook
2. Type a very long line (longer that the notebook panel width)
3. The horizontal scrollbar appears at the bottom of the notebook panel not in the editor.

Expected behavior

Codemirror width is identical and the scrollbar appears at its bottom. Like in 3.2:

The changes made in #11508 could be the source of this bug.

Context

• Operating System and version: Debian 11
• Browser and version: Firefox 95
• JupyterLab version: v4 alpha 17

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.

[rfox12]

I think Frederic is correct about changes made in #11508. I can't see an easy fix to this; but when I toggle off "display: table" from .jp-InputArea then the cell looks to be the correct width.

[pree-T]

I want to work on this. Can someone help me a bit with this?

[fcollonval]

Hey @pree-T

I think the change that breaks the style is the following:

You could try to set some constrain on the width or max-width to see if you can prevent the cell input growth.

[rfox12]

Just a side question here... is there a particular reason JupyterLab is avoiding flex layouts? Seems to be widely supported and working fine for my other front end code...

[fcollonval]

As mentioned in the blamed PR, the reason is to be able to control the break occurring when rendering the notebook for printing.

[pree-T]

Hey @pree-T

I think the change that breaks the style is the following:

You could try to set some constrain on the width or max-width to see if you can prevent the cell input growth.

Thank you ! I just want to ask which ide you all are using for the purpose of development of this as vscode is showing several errors.

[krassowski]

@pree-T you need to install dependencies locally if to avoid this error messages (and get more accurate suggestions); this is a shared requirement among all IDE/editors suitable to work with JupyterLab codebase I know of. Please see Setting up a local development environment in contributor documentation.

I will be preparing a Binder hosting an environment ready for JupyterLab development using JupyterLab itself soon.

[pree-T]

Hey @fcollonval I tried what you suggested but that does not seem to fix this issue. Is there any other fix for this?

[fcollonval]

@pree-T I played a bit with the CSS, and the trick we need is to set table-layout to fixed.

I achieved something that looks not too bad adding:

.jp-InputArea {
  /* ... */
  table-layout: fixed;
  width: 100%;
}

.jp-InputPrompt {
  /* ... */
  width: var(--jp-cell-prompt-width);
}

.jp-InputArea-editor {
  /* ... */
  /* remove width: 100% */
}

if you want to open a PR.

The drawback is that for very large execution count, the input prompt may look ugly (but is it sane to have more than thousands cells)

[pree-T]

I have made a PR for the same. Kindly see to it.