When viewport is narrow, decrease height of blue collapser bar, extend content / work area width

[andrii-i]

Problem

The size of cell content / work area is especially important when the viewport is narrow or zoom is high. Larger work area is always nice to have when it does not affect other areas of user interface and user experience negatively.

Also PR #7570 decreases the width of the cell content / work area by 2 * var(--jp-cell-padding) (10 px for me). It is most notable when viewport is narrow.

Proposed Solution

It was suggested by @krassowski that to increase the width of the cell content / work when when viewport is narrow, it might make sense to decrease height of blue collapser bar and extend content / work area instead.

When viewport is narrow, decrease the height of this component:

And increase the width of this component:

[andrii-i]

Relevant WCAG standard: https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

The size of the target for pointer inputs is at least 24 by 24 CSS pixels

Note that collapser already has width less than 24 px: