Add left and right padding to active cell border

[andrii-i]

Problem

Active cell border does not have left and right padding. As a result, when viewport is narrow active cell border is not displayed on left and right.

Notebook (wide viewport):

Notebook (narrow viewport):

Proposed Solution

Add left and right padding to active cell border similar to JupyterLab. As an added bonus, this would make design language used in lab and notebook more consistent.

JupyterLab:

[jtpio]

Thanks @andrii-i for the suggestion 👍

This sounds good. If you would like to open a PR that would be great, thanks!

[andrii-i]

Feedback during the call: overall sounds good, important to test on WCAG reflow requirements for low width / high zoom viewport https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom

[andrii-i]

Something else that I noted is that in Notebook cell has 2*var(--jp-cell-padding) (10 px for me) left and right padding set by body[data-notebook='notebooks'] .jp-Notebook-cell class which overwrites .jp-Cell css class.

In JupyterLab cell has var(--jp-cell-padding) (5 px for me) left and right padding set by .jp-Cell css class.

[andrii-i]

• Created Add active cell border padding, remove double cell padding #7570 to implement changes discussed here. Please give it look if possible.
• Created When viewport is narrow, decrease height of blue collapser bar, extend content / work area width #7571 based on suggestion by @krassowski on how to increase the cell work area width.