Increase graph size

[biancadanforth]

There are some areas where display: grid is used where it makes more sense to use display: flex.

For example, we use display: grid for the main element, which results in uneven whitespace at the bottom of the element, since we give the footer a row-height of 30%:

If we use display: flex, we can use flex-direction: column and justify-content: space-between to push the footer all the way to the bottom and widen the visualization area:

Converting main to display flex will also ensure the headers in main don't take up more space than they need to:

In general, relative sizes using display: grid (ex: % or fr) mean that we are specifying a width or height of an element based on the height of its parent or the height of the window -- independent of its actual content/padding. What we really want is to say: place it as far down (for the footer) or as far up (for the graph headers) the page as possible given its size, and let the middle flex item (the visualization div) grow to meet them. This is where flexbox comes in handy.

There may be other areas too where the UI could be tweaked; this issue should encompass all of those nits.

[princiya]

This is a nice example of where grid works vs doesn't! Thanks @biancadanforth for summing it up so well.

[jonathanKingston]

The graph should actually appear underneath all these other elements. I'm not bothered on solution.

One solution could be setting the graph as 100vh and lay over the top. or calc(100vh - --headerHeight)