Make better use of space near bottom of page

[Inwerpsel]

Most of the UI areas handle different screens and different combinations of displayed areas quite well. The main remaining issue is how to efficiently make use of the bottom bar and handle the max height and scrolling of the middle section. Ideally this doesn't compromise on flexibility in other areas.

I tried to achieve similar behavior as the top bar, which can push down the right and left areas (and inner frame), making good use of the space. Though it does mean some elements are just to high to put here.

I couldn't find a CSS configuration that achieves this for the bottom bar, without sacrificing flexibility on the middle section. Unfortunately I didn't document/commit these attempts. IIRC I tried multiple flexbox properties but could get nothing to play nicely with the existing CSS.

Instead it's currently fixed to the bottom and overlaps the middle section.

I also put a fractional max height on the middle sidebars just to be done with it. It's far from ideal and probably only works well on my screen size.

The solution could take into account that history navigation might in the future attempt to restore the scroll position in the sidebar.

In theory, this should be possible with CSS Grid. Perhaps it's better to do this together with (or after) a UI implementation of CSS Grid, as writing this code by hand is quite confusing.