Using QLayout to constrain the maximum width of site content

[darianf]

Apologies if this has been asked before, did a quick search and found nothing. I'm trying to use QLayout (as the docs recommend using this as the foundational piece for site layouts) to structure our main page layout, which is basically a (maximum) 1400px wide block of scrollable content. Content will be responsive as the window size reduces to sizes less than 1400px, but we don't want it to take up the whole width of a 1900px wide screen.

I tried using the layout builder to include left and right side drawers, that are essentially empty, however that doesn't suit our needs as when the screen width reduces, the drawer size remains the same and it only has the effect of reducing our main content area.

The above image shows our "1400px wide" content, with a screen width of 1920px, and has some emptiness to the left and right sides (so main content is centered). As you reduce the screen width from 1920px down towards 1400px, it is only the width of the blank space that reduces, until you hit 1400px and then we move down into our responsive breakpoints.

I tried using the container property on QLayout, but it puts the scrollbar on the container itself (edge of scrollable content), whereas we want the scrollbar to be on the window (right hand side).

The best I could come up with is:

but I'm not sure what flow on affect this may have for using all of Quasar's UI components.

Bonus points for how could I also include a sticky footer (page content scrolls underneath it, but it always stays visible), and a reveal-style header which is initially visible but when the user scrolls down a bit, it disappears. Concept below: