Home page layout slightly broken on iPhone Safari

[daprice]

This is what I see when I view https://joinmastodon.org on an iPhone 11 Pro (iOS 17.4 Safari):

1. The background doesn’t go all the way to the edge of the page (this also carries through the whole page, with every centered element being slightly off center by the same amount).
2. If I adjust the font size in the browser, the width of the content area onscreen changes with the font size (i.e. the extra whitespace on the right edge grows and shrinks).
3. The left side of the “Join mastodon.social” button goes off the left edge of the screen.
4. The “Pick another server” button goes outside the background and touches the right edge of the screen (this puts it underneath the scroll bar).
5. The illustration is positioned awkwardly, with only a sliver of the character being onscreen and the character’s eye covered up by the Join button.
6. The browser fills in the top safe area with white because that’s the main background color of the page, but should probably have a theme-color that matches the header bar, like:

mockup

Using the iOS Simulator, I can see that these issues occur across all non-Plus/Max iPhone models.