notebook container div still differs from "classical" Notebook experience

[edthrn]

1. Problem

Even though both UIs are currently very close, I still feel frustration when using RetroLab, mostly because of CSS discrepancies.

With the classical Notebook interface, the notebook <div id="notebook-container"> kept left and right margin on small width windows, and increased in height as cells count grew.

It appears it is not the case with RetroLab latest version.

2. Proposed Solution

I would like to see the exact same UI on this notebook-container div, which is probably the most important of the whole document ; especially knowing that RetroLab will be used as the next major version of the Notebook.

Unfortunately, my front-end engineering skills are very poor, so I won't be able to propose a PR myself :confused:

3. Screen shots to illustrate the difference

Both screenshots are made with the same (small) window width.

3.1 "Good ol' Notebook" has margins that makes the experience neater

---

3.2 Retro Lab has no margins on small width screens

[welcome[bot]]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively. You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! :wave:
Welcome to the Jupyter community! :tada:

[jtpio]

Thanks @edthrn for opening this issue :+1:

Indeed the styling of the Notebook component in RetroLab can still be improved.

Currently the "documented oriented feel" is implemented in CSS here:

https://github.com/jupyterlab/retrolab/blob/7fed46857663bb3f9e7ead599aaa85eefddf6c4e/packages/notebook-extension/style/base.css#L9-L46

Probably this could be tweaked to still keep some margins on smaller viewports.

[edthrn]

Thanks for your reply :+1:

Indeed, side margins on smaller viewports should be tweaked, but even more important is adjustable bottom margin for any width: it's a visually pleasant feature of the old notebook style.

[jtpio]

Some improvements towards this were done in https://github.com/jupyter/notebook/pull/6376, and are available in notebook>=7.0.0a3.

[ShobhanSrivastava]

Hey @jtpio is the issue still open? I would like to work on it

[jtpio]

Thanks @ShobhanSrivastava.

I think there might still be some work to be done on the left and right margins. So if you want to have a look that would be great, thanks!

[Gardezi1]

is this still open?

[jtpio]

This is what it currently looks like with the latest state of main as of: 2e4886f31fefe63e1278f84f9d39c0546fe5311e

https://user-images.githubusercontent.com/591645/221798037-edd311fb-0b37-403d-b002-558743cb9908.mp4

If folks are happy with this we could indeed close the issue. We can always open new ones to iterate more if needed.

[harshil202]

Hello, @jtpio does it require changes? If is there any changes then I would like to do them.

[andrii-i]

This is what it currently looks like with the latest state of main as of: 2e4886f

notebook-div.mp4 If folks are happy with this we could indeed close the issue. We can always open new ones to iterate more if needed.

https://github.com/jupyter/notebook/issues/6388#issuecomment-1447777485

Closing as solved based on this comment and "thumbs up" reactions to it