CSS looks weird

[Gewi413]

Steps to reproduce: make the window 800px wide

shouldn't overflow

shouldn't clip

shouldn't overflow

shouldn't overflow

when then further reducing screen width: isn't vertically aligned

and if zoomed in to absulute maximum (or longer map name):

also: the disable background animation toggle is hidden then?

nitpick: this should end cleanly

this doesn't imply "hover me, I'm a button"

sorry for making this an issue of multiple issues - but those all seem very visual and hopefully fixable with some random css properties that aren't set correctly

[PancakeTAS]

make a pull request

[p2r3]

Most of these problems are unfortunately not easily fixable with some random CSS properties that aren't set correctly, but are instead caused by squishing elements to sizes that they're not designed to be rendered at. Responsive scaling is a fundamental pain in the ass with any CSS.

This is why we have breakpoints. You mentioned these issues appear when the window size is 800px, which by no coincidence is where the only breakpoint is. That is the extreme, it's the edge case. This hints to a lack of breakpoints in some range, and I'd say this range is probably between 800px and 1024px, after which the UI starts to look fine. In this case, if we're adding a new range, moving the 800px breakpoint back would also make sense. That one was designed primarily for tall devices, and I don't expect anyone to realistically achieve 800 pixel width on a phone.

[p2r3]

I'll add to this discussion something that was brought up by @soni801 on Discord - if anyone's willing to rewrite the whole frontend to use flex/grid without breakpoints, that's also a valid and welcome solution.

Though I figure I'll probably get to implementing an extra breakpoint before anyone else volunteers to redesign everything with flex.