Restore auto-resizing of the code console input prompts by jtpio · Pull Request #17819 · jupyterlab/jupyterlab

jtpio · 2025-08-26T07:34:26Z

References

Also reported in:

This was reported as a regression in 4.4 by some users, so looking into fixing it for 4.5.

Code changes

Use a ResizeObserver to check changes in height for the input prompt cell to automatically set the split relative sizes.

This only applies when promptCellPosition is set to bottom or top.

User-facing changes

This PR now brings the following improvements:

Automatically resize the input prompt grows vertically (only applies to bottom and top)
If the user has not manually resized the split, clearing the code (or removing some lines) or executing it shrinks the input prompt down
The input prompt keeps its full size if the prompt cell position is changed
The manual resize flag is cleared when the prompt cell position changes

jupyterlab-code-console-prompt-resize.mp4

Backwards-incompatible changes

None

jupyterlab-probot · 2025-08-26T07:34:29Z

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link:

jtpio · 2025-08-26T11:02:38Z

Do people think this should be put behind a setting, so users can opt-out of the new behavior?

jtpio · 2025-08-26T12:04:10Z

Do people think this should be put behind a setting, so users can opt-out of the new behavior?

Thinking more about this, it's probably fine without the setting, as the behavior in this PR feels a little bit more natural in the end.

jtpio · 2025-08-27T08:02:11Z

Made a couple of tweaks to the UX. Overall this PR now brings the following improvements:

Automatically resize the input prompt grows vertically (only applies to bottom and top)
If the user has not manually resized the split, clearing the code (or removing some lines) or executing it shrinks the input prompt down
The input prompt keeps its full size if the prompt cell position is changed
The manual resize flag is cleared when the prompt cell position changes

jupyterlab-code-console-prompt-resize.mp4

jtpio · 2025-08-27T08:17:43Z

The failing UI tests are tracked in #17820

Otherwise, marking as ready, so folks can try the UX (hopefully Binder will be back soon).

agriyakhetarpal

Thanks, @jtpio! Confirming that this looks good and works well from my end 👍🏻 Besides the NumPy website PR, I also highlighted this issue in jupyterlite/jupyterlite-sphinx#290, where I had previously attempted to (incorrectly) fix the problem in the JupyterLite codebase.

Do people think this should be put behind a setting, so users can opt-out of the new behavior?

Thinking more about this, it's probably fine without the setting, as the behavior in this PR feels a little bit more natural in the end.

This was reported as a regression in 4.4 by some users, so looking into fixing it for 4.5.

I agree; this PR is definitely a nice restoration of the original behaviour and shouldn't need to be opted out of.

I've also added a few comments below, and I hope they are helpful somewhat:

agriyakhetarpal · 2025-08-27T09:27:58Z

packages/console/src/widget.ts

+      return;
+    }
+
+    const remainingHeight = totalHeight - inputHeight;


Hmm, what would happen if inputHeight exceeds totalHeight, i.e., for very tall content? Should we have something like const maxInputHeight = Math.min(inputHeight, totalHeight * 0.8) here, or does SplitPanel clamp negative values to 0?

If yes, we could also consider if we want to refactor this math into a _calculateSizes function or similar, as I think _adjustSplitPanelForInputGrowth alone is doing quite a lot :)

Normally it should not be possible for inputHeight to be greater than totalHeight, since totalHeight corresponds to the height of the SplitPanel and the input widget is one of the splits.

agriyakhetarpal · 2025-08-27T09:30:19Z

packages/console/src/widget.ts

+    // Detect height changes
+    if (promptCell.node) {
+      this._promptResizeObserver = new ResizeObserver(() => {
+        if (!this._hasManualResize) {
+          this._resetInputSize();
+        }
+        requestAnimationFrame(() => {
+          this._adjustSplitPanelForInputGrowth();
+        });
+      });
+      this._promptResizeObserver.observe(promptCell.node);
+    }
+


Not sure about any performance considerations or what the previous implementation was like, but would this cause a lot of redraws unless we debounce it?

I think the previous implementation was just using flex, so it was offloaded to the browser, but otherwise, yeah, I was thinking about adding some debouncing to this.

The main idea is that we need to catch any change to the height of the prompt cell, which happens most of the time when a user adds a new line.

agriyakhetarpal · 2025-08-27T09:32:46Z

packages/console/src/widget.ts

  private _translator: ITranslator;
  private _splitPanel: SplitPanel;
+  private _promptResizeObserver: ResizeObserver | null = null;
+  private _hasManualResize = false;


Suggested change

private _hasManualResize = false;

private _hasManualResize: boolean = false;

^ this is not needed as typescript can infer this type

krassowski · 2025-09-02T08:54:46Z

galata/test/jupyterlab/console.test.ts

+
+    const afterPasteHeight = await codeConsoleInput.boundingBox();
+    expect(afterPasteHeight).not.toBeNull();
+    expect(afterPasteHeight!.height).toBeGreaterThan(initialHeight!.height);


Looks like this is flaky as per GitHub annotations?

krassowski · 2025-09-02T08:56:37Z

packages/console/src/widget.ts

+        requestAnimationFrame(() => {
+          this._adjustSplitPanelForInputGrowth();
+        });


Do we need to delay this until next frame? I am not sure if this is the exact source of the issue, but it looks like each time I press enter a really visual jitter is present

jitter.webm

Oh wow, I haven't experienced such jitter locally. Which browser is it?

iirc the delay was needed to be able to pick up the correct size. But I can try to take another look at it to double check.

It's Chrome.

I tried it on Binder, and I’m noticing the same jitter on Brave browser as well.

OK I could reproduce locally with Chrome 141:

jupyterlab-console-jitter.mp4

jtpio · 2025-12-01T10:24:03Z

The last few commits should have fixes the jittering issues reported previously. It now looks better when testing locally:

jupyterlab-auto-resize-code-consoles-improved.mp4

jtpio · 2025-12-01T11:11:27Z

Marking this one as ready for review again.

@krassowski @agriyakhetarpal if you would like to try the new version on Binder, that would break, thanks!

https://mybinder.org/v2/gh/jtpio/jupyterlab/auto-resize-code-console-inputs?urlpath=lab

krassowski

LGTM! Thank you @jtpio!

jtpio · 2025-12-01T12:21:59Z

Thanks for the review!

…le input prompts

…rompts (#18160) Co-authored-by: Jeremy Tuloup <jeremy.tuloup@gmail.com>

…7819) * Auto-resize the code console input prompts * Add UI test * Handle moving the prompt cell with code in it * timeout * try to improve the resize logic * improve UX * fix jittering * integrity * more integrity fixes * fix promptCell * fix package.json * stabilize tests * snapshot update

Auto-resize the code console input prompts

e7ad275

github-actions bot assigned jtpio Aug 26, 2025

github-actions bot added the pkg:console label Aug 26, 2025

jtpio added this to the 4.5.0 milestone Aug 26, 2025

jtpio added enhancement tag:Regression Behavior that had been broken, was fixed, and is broken again labels Aug 26, 2025

jtpio changed the title ~~Auto-resize the code console input prompts~~ Restore auto-resizing of the code console input prompts Aug 26, 2025

Add UI test

d0970dc

github-actions bot added the tag:Testing label Aug 26, 2025

jtpio mentioned this pull request Aug 26, 2025

Restore automatic resizing of the console prompt in Jupyterlab 4.4? #17597

Closed

jtpio added 4 commits August 26, 2025 15:03

Handle moving the prompt cell with code in it

95bf9ad

timeout

9b4d5ba

try to improve the resize logic

148d747

improve UX

df34e8c

jtpio marked this pull request as ready for review August 27, 2025 08:17

jtpio added the status:Needs Review label Aug 27, 2025

jtpio mentioned this pull request Aug 27, 2025

Change prompt cell position for the NumPy REPL (do not merge) numpy/numpy.org#872

Open

agriyakhetarpal approved these changes Aug 27, 2025

View reviewed changes

pr-triage-board bot added this to PR triage (experimental) Aug 28, 2025

krassowski reviewed Sep 2, 2025

View reviewed changes

Merge branch 'main' into auto-resize-code-console-inputs

6a4c0dd

jtpio removed the status:Needs Review label Oct 8, 2025

jtpio marked this pull request as draft October 8, 2025 12:18

krassowski added bug and removed enhancement labels Oct 22, 2025

krassowski modified the milestones: 4.5.0, 4.5.x Oct 28, 2025

jtpio added 4 commits November 28, 2025 17:35

Merge branch 'main' into auto-resize-code-console-inputs

2a49e00

fix jittering

c02d385

integrity

c04c864

more integrity fixes

8f0e41a

github-actions bot added tag:CSS For general CSS related issues and pecadilloes Design System CSS labels Nov 28, 2025

jtpio added 3 commits November 28, 2025 20:57

fix promptCell

3b209d0

fix package.json

53bacd6

stabilize tests

efde572

snapshot update

e77495f

jtpio marked this pull request as ready for review December 1, 2025 11:10

jtpio added the status:Needs Review label Dec 1, 2025

krassowski approved these changes Dec 1, 2025

View reviewed changes

jtpio merged commit b8aa3bb into jupyterlab:main Dec 1, 2025
85 checks passed

github-project-automation bot moved this to Done in PR triage (experimental) Dec 1, 2025

jtpio deleted the auto-resize-code-console-inputs branch December 1, 2025 12:22

meeseeksmachine pushed a commit to meeseeksmachine/jupyterlab that referenced this pull request Dec 1, 2025

Backport PR jupyterlab#17819: Restore auto-resizing of the code conso…

73d7800

…le input prompts

meeseeksmachine mentioned this pull request Dec 1, 2025

Backport PR #17819 on branch 4.5.x (Restore auto-resizing of the code console input prompts) #18160

Merged

jtpio added a commit that referenced this pull request Dec 3, 2025

Backport PR #17819: Restore auto-resizing of the code console input p…

3b5ccca

…rompts (#18160) Co-authored-by: Jeremy Tuloup <jeremy.tuloup@gmail.com>

	private _hasManualResize = false;
	private _hasManualResize: boolean = false;

Uh oh!

Conversation

jtpio commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

References

Code changes

User-facing changes

Backwards-incompatible changes

Uh oh!

jupyterlab-probot bot commented Aug 26, 2025

Uh oh!

jtpio commented Aug 26, 2025

Uh oh!

jtpio commented Aug 26, 2025

Uh oh!

jtpio commented Aug 27, 2025

Uh oh!

jtpio commented Aug 27, 2025

Uh oh!

agriyakhetarpal left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jtpio commented Dec 1, 2025

Uh oh!

jtpio commented Dec 1, 2025

Uh oh!

krassowski left a comment

Choose a reason for hiding this comment

Uh oh!

jtpio commented Dec 1, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jtpio commented Aug 26, 2025 •

edited

Loading