Elements cut out, hang off other elements, and overlap, on smaller screens

[5ucur]

Describe the bug
On screens at resolution 1280x1024, elements of the site either overlap, hang off their spaces, or are cut off by other elements.

Details

Screenshots (click to expand/collapse)

All screenshots are at 100% page zoom.

• Main page:
  Note the overlap in the top bar, the hanging off text in the folder tabs, and the cut-off images.
  
• Memory Archive elements:
  Note how "Results Display" overlaps the "Music" button (rendering it unusable!), and how "Start Typing" is cut off.
  
• Jiminy's Journal elements:
  Note how game names are cut off.
  This also happens in the Memory Archive and the Moogle Shop.
  
• Moogle Shop elements:
  Note how "Start Typing" is overlapped by the Search button, while the "Accessories & Armor" and "Synthesis Materials" lines break (not unusable, just notable)
  

Correction
Specifically about the page in the first screenshot:

• "Moogle Shop" link on top should not overlap the About button.
• The titles of the folders should fit within the folders' tabs.
• The images should be scaled along with the folders, instead of cutting off within them; the problem is most apparent at "Moogle Sh", but also at "Memor Archiv"
  • Zooming the page and resizing the browser window shows that they are consistent with the viewport height.

And similarly for other pages affected.

Additional context

• Tested on another device with resolution 1680x1050; none of these issues reproduce there.
• Tested on a mobile device with resolution 1080x2400. While the image cutoff also happens on mobile, the other issues do not.

[WaterKH]

Yeah, this is also captured by #237 but provides more details, thank you! This will probably be a larger re-work, but I'll see what I can manage with the different sizings.

I think the gameplan right now would be to have different "zones" where when drop down to a specific zone, the text is bigger or smaller, the images similarly alter.