Left panel and right panel resizer is too small to use comfortably

[JasonWeill]

Description

The split panel handle (lm-SplitPanel-handle) is very narrow in JupyterLab 4.0.0a34, a35, and a36. This handle is used to resize the left panel or right panel. This control is much more difficult to use than in JupyterLab 3.6.1.

In both cases, the lm-SplitPanel-handle element itself is only 1 px wide, but its clickable area is wider than that (wider in 3.6.1 than in 4.0.0a35).

cc @ellisonbg @andrii-i

Reproduce

Hover over the boundary between the left panel and the main area. Observe that the mouse cursor does not change to the "left-right arrow" cursor nearly as much in 4.0.0 as in 3.6.x.

3.6.1:

jl-3-6.mov

4.0.0a36:

jl-4-0.mov

Expected behavior

There is a wide enough grab handle to comfortably click and drag.

Context

• Operating System and version: macOS 12.6.3 "Monterey"
• Browser and version: Firefox 102.8.0esr (64-bit)
• JupyterLab version: 3.6.1 / 4.0.0a36

[JasonWeill]

Not present in 4.0.0a0.

[JasonWeill]

Not present in 4.0.0a17.

[JasonWeill]

Not present in any release before 4.0.0a34. See 4.0.0a34 release notes.

[JasonWeill]

Among the differences between 4.0.0a33 and a34 is a substantial CSS update from #13828. I tried deleting these two changes, but the problem persists:

jupyterlab/packages/notebook/style/toolbar.css

Lines 22 to 24 in cc5b3e9

	/* disable paint containment from lumino 2.0 default strict CSS containment */
	contain: style size !important;

jupyterlab/packages/application/style/core.css

Lines 53 to 55 in 358e470

	/* relax lumino strict CSS contaiment to allow painting the menu bar item
	over the menu in order to create an illusion of partial border */
	contain: style size !important;

[JasonWeill]

@krassowski I tried to launch a binder from #13828 but was unsuccessful. Do you think that this change may be responsible for the smaller usable area of the panel resizer?

[krassowski]

Thank you fir bisecting. Yes, we need to add:

/** disable size containment as the handle overhangs over another div */
.lm-SplitPanel-handle {
  contain: style!important;
}

in lumino.

[ellisonbg]

Thanks!

…

On Tue, Mar 21, 2023 at 2:08 PM Jason Weill ***@***.***> wrote: Closed #14219 <#14219> as completed via jupyterlab/lumino#560 <jupyterlab/lumino#560>. — Reply to this email directly, view it on GitHub <#14219 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAGXUF7RSNOX7LA6T2ROBTW5IKEBANCNFSM6AAAAAAV7ARSRI> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Brian E. Granger Senior Principal Technologist, AWS AI/ML ***@***.***) On Leave - Professor of Physics and Data Science, Cal Poly @ellisonbg on GitHub