layouts/index.html in small windows

[CouldBeThis]

Hi, in the file layouts/index.html as described in the wiki, there is a problem with the CSS. I was driving myself nuts trying to figure out where all the content was going.. been a long time since I did much web design so I guess my troubleshooting skills are a wee bit rusty. But finally I cracked it.

In a small viewport it appears blank/broken. I tile my windows to be narrow.

This is how it displays at ~800px (and in some iterations, was a totally blank page):

Now I have noticed that if you make the window >1300px wide, it will display correctly:

However by changing this line:

<main class="container" style="margin-left: calc((100vw - 2*600px - 2*40px)/2);margin-right: auto;">

to this (removing the hardcoded style)

<main class="container">

Now it's like this even at 800px:

Don't mind the emojis they were helping me troubleshoot. :)

The CSS is over my head so I can't fix it any better than that unfortunately.

thank you for the repo, very helpful.

On a Mac with Firefox 94 and also looked in safari v 15.1 with same result.