Screen elements reposition on load

[stefanv]

See e.g. the button next to the title, which shifts on reload.

I think this is mainly because we don't define image widths. The fonts will still shift things around a bit, but let's pin down what we can.

This was also surfaced by the lighthouse report.

[stefanv]

Upon further investigation, it looks like the only (?) remaining shift is because of the font rendering. I investigated different ways of doing the font rendering: you can choose to hold off on display until the remote font arrives (bad), or not use the remote font if it fails to arrive before a certain time (probably bad), or the current behavior, which is to swap them out (causes shifts). No very good options, as far as I can tell.

See https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

size-adjust is perhaps the most promising candidate, when it arrives.