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

### 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:

No files or tests are named. Reproduce the layout at narrow viewport widths or high zoom, then locate the blue collapser bar and cell content/work area styles; done means the bar is shorter and the work area wider without negatively affecting other interface areas.

Written by the indexing model from the issue text.