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