Buggy CSS when browsers are not maximised, needs more wrap-around

[Evrey]

• Gitea version (or commit ref): 1.14.0+dev-215-gd025d84d9, official docker image
• Git version: (irrelevant)
• Operating system: (irrelevant)
• Database (use [x]):
  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite
• Can you reproduce the bug at https://try.gitea.io:
  • Yes (Screenshot below)
  • No
• Log gist: (irrelevant)

Description

Many websites falsely assume that people run their browsers maximised, taking the entire available monitor area for themselves. I am one of these people who instead tile their browser window, making it take up only half a motinor column. The resolution of the monitor in question is 1080p.

The fix is to make all horizontal flexboxes wrap around once the window width is reached.

Screenshots

All screenshots made at the same resolution. You can see a bit of my desktop background on some of them, and the next monitor to the right.

[wULLSnpAXbWZGYDYyhWTKKspEQoaYxXyhoisqHf]

I second this, also noticed it.

[silverwind]

Need to switch that to two-row layout on small screens like it's already done for PR review toolbar, e.g. https://try.gitea.io/silverwind/symlink-test/pulls/8/files.

[Evrey]

Addendum:

Horizontal scroll bars are needed for tables, such as the user table in the admin area.

[edgar-bonet]

This issue has become more obvious with the extra buttons brought by 1.17.0. Now I experience a broken layout for all window widths in the range 768px–1199px, both on Firefox and Chromium.

[silverwind]

Yes, agree there is too many buttons already. #20375 will remove one of them.

[silverwind]

#20602 will consolidate a few more.