As discussed on Discord, the header and footer now take up full width. I went with the version where the content is still capped at 1024px, like the main content.
The changes are purely CSS, except for an extra div around the main content. This is needed because the grid no longer adds a minimum height to the main content, which means the footer will not be pushed to the bottom on pages with little main content. So now instead the header, content and footer are in a flex column, and the content flex-grow’s to make sure it’s at least taking up the remaining viewport space.
A few redundant classes have been removed, e.g. grid properties on elements that were not grid-items. I also removed (unused/invisible) border radius and drop-shadow from the header and footer.
I tried best possible to check the layout across the different views. There does not currently seem to be any specific UI test suite or similar - let me know if I missed it.
Normally I would add screenshots to a PR like this, but this does not seem supported currently. I can share over Discord if you’re interested.
I signed off on the commits, but I see other PR's also are signed-off in the description. I would've wanted to edit the description, but doesn't look like I can :-) Let me know if/how I should change, it it's needed.