[frogend/bug] Settings/admin page does not respond into vertical mode soon enough

[trysdyn]

Describe the bug with a clear and concise description of what the bug is. Please include screenshots of any visual issues.

On viewing /settings in a browser window constrained to 1080 pixel width, the content pane overflows the browser window and results in an awkward horizontal scroll situation for text fields; also the logged in user box in the nav bar is extremely crunched to my avatar and the first two letters of my name.

Shrinking the window to about 960 pixel width will cause the responsive design to kick in and move to a more compact presentation; but in between the two, the presentation is a little strange.

This is new behavior I believe may have been introduced by some padding out of the sidebar in 0746ef7

Super duper low severity nit-pick :)

What's your GoToSocial Version?

v0.7.1 git-60639a6

Browser version

Firefox 111.0.1 (64-bit)

What happened?

I pulled in head to fix the pgsql prune bug (thank you BTW!) and navigated to /settings to see the changes brought in by 0746ef7

I view and administrate GtS from a system that has a flipped orientation display, so the browser window is 1080 pixels wide. The settings frontend changes look neat, but in this orientation the main content pane overflows the window horizontally about 15%, meaning all the text fields require horizontal scrolling to fully see and the "who is logged in" element in the nav bar is extremely crunched.

What you expected to happen?

The page moves to its compact/mobile display mode before resorting to horizontal overflow in text fields and crunching elements.

It looks like the @media query sets the marker line between modes at 60rem but if we want to avoid that horizontal scroll it needs to be 72-75rem (or deeper layout changes happen like shrinking the max width of the content panel).

How to reproduce it?

View /settings in a window somewhere between 960 and 1080 pixels wide.

Anything else we need to know?

No response

[tsmethurst]

Aha, thank you :)