Mitigating responsive in web

[duehoa1211]

• Mitigating collection screen responsive
  1. Overview tab ✅
  2. Episode tab ✅
  3. Credit tab ✅
  4. Images tab ✅
  5. Tags tab ✅
  6. Files tab ✅
• Mitigating utilities screen reponsive

[duehoa1211]

Link to #745

[ElementalCrisis]

Your changes created new issues for the options bar at lower res now.

Review the mockups in Figma (check Components page) as at 1280 and below, the search bar is always shown and takes up the entire width.

The button and padding styling have been changed as well. I imagine it was changed to make the options fit, however, if they don't fit, they get put into the drop-down. The Gap between items on the option bar is always 1rem, otherwise it looks crowded.

Also, the drop-down button does not only appear when you search. Search is an overlay that if the options are present, it covers. If the options are in a dropdown, it would always be visible.

Correct

Your Version

[ElementalCrisis]

Here's an example when the options bar still fits at a lower browser res.
https://github.com/ShokoAnime/Shoko-WebUI/assets/9443295/4b551811-17bc-43b0-9e6f-fbeadb55cb7c

Example when it does not.
https://github.com/ShokoAnime/Shoko-WebUI/assets/9443295/de701896-f39d-423b-8f6c-e4d15bd1a0ca