Increase notebook-cell margin in side-by-side mode

[jess-x]

References

Fixes #11376

Code changes

When in side-by-side mode, increase top/bottom margins to 3em & left/right margins to 5%

User-facing changes

Before:

Screen.Recording.2021-11-24.at.4.54.04.PM.mov

After:

Screen.Recording.2021-11-24.at.5.07.28.PM.mov

Backwards-incompatible changes

[jupyterlab-probot]

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

[echarles]

This looks better with the margins. 2 comments:

1. I see 2 collapsers (the blue vertical lines). I am no more sure if this was already there before. Is this intented?
2. You have set the margin to margin: 3em;. Have you tried a '%' instead of a fixed value? Just asking to see if we could have a margin depending on the actual width of the notebook panel.

[jess-x]

This is how 2% notebook-cell margins look on my screen. I cannot actually decide between this and 3em by eyeballing the minimal difference they have on my screen, but using '%' does make more intuitive sense to me. Thanks @echarles

[jess-x]

I see 2 collapsers (the blue vertical lines). I am no more sure if this was already there before. Is this intended?

Hmm, the left most ones are the input collapsers and the ones on the right side are output collapsers, I believe. Visually they can be confusing, I see. I could address this separately

[echarles]

Hmm, the left most ones are the input collapsers and the ones on the right side are output collapsers, I believe. Visually they can be confusing, I see. I could address this separately

Yeah, I have been fooled by the input and output collapsers. Let's leave it as they are for now.

[echarles]

This is how 2% notebook-cell margins look on my screen. I cannot actually decide between this and 3em by eyeballing the minimal difference they have on my screen, but using '%' does make more intuitive sense to me. Thanks @echarles

Prolly just set only margin-left and margin-right instead of margin(margin will set the top and bottom, which we don't need here)

I have tried with margin-left: 5% and margin-right: 5% and sounds to me like giving a better display, especially when you resize the browser to a small viewport.

[jess-x]

Prolly just set only margin-left and margin-right instead of margin(margin will set the top and bottom, which we don't need here)
I have tried with margin-left: 5% and margin-right: 5% and sounds to me like giving a better display, especially when you resize the browser to a small viewport.

I think right now in side-by-side mode, the cells are too clustered together, that's why users are having a harder time focusing outputs with their input cells. I am aware by increasing margin, margin-top and margin-bottom are both increased under the hood. That is an intentional UI/UX decision from me, and I'd argue that's better than just increasing left/right margins. In terms of 2% vs 5%, again I don't have a strong opinion/argument as I don't have access to various screens w/ different sizes. And I think A/B testing that with power users might let us make a more educated decision (if that's possible). With that said, I personally like the current implementation (margin: 2%), but feel free to push to this branch if needed :)

[echarles]

I think right now in side-by-side mode, the cells are too clustered together,

Thx for the reminder. In that case, increasing top and bottom makes sense.

And I think A/B testing that with power users might let us make a more educated decision (if that's possible).

True. You have spent more time than me trying the different options. 2% was ok for me also.

Let's wait a bit before merging for anyone wiling to give it a try and provide feedback.

[fcollonval]

I tried it on my ultra wide screen. I would not use a percentage for the vertical margin. Even 2% starts to be a lot. And if you close or not a side panel (see below), this changes the displayed cells although the height did not change. So I would use a constant vertical margin not a variable one.

With filebrowser open	Without file browser

[echarles]

So I would use a constant vertical margin not a variable one.

Makes sense.

[jess-x]

@fcollonval @echarles thanks!! I changed top/bottom margins to 3em, left/right margins to 5%. On my screen, looks like this right now

[jtpio]

Thanks @jess-x.

left/right margins to 5%

@fcollonval how does the 5% look on the wide display?

[fcollonval]

@fcollonval how does the 5% look on the wide display?

With sidebar	Without sidebar

[fcollonval]

Thanks @jess-x

[echarles]

Thx @jess-x

[echarles]

@meeseeksdev please backport to 3.2.x