Improve responsiveness for larger screens (e.g. 1440p and up)

[albrow]

Version 0.2.0 improved support for smaller screens down to a minimum resolution of 1080px x 700px. Smaller screens were the first priority because certain layout issues were making the game unplayable on them. With that out of the way, the next priority in terms of responsive design should be improving layouts on larger screens. There are no game-breaking issues, but currently the game can look a little bit awkward on resolutions of 1440p and up because there is a lot of empty space.

For example, here's a current screenshot at around 1440p:

As a general rule of thumb, for larger resolutions we want it to look like you have pressed the zoom in button on your browser. In other words, everything should scale mostly linearly. It's okay to make some exceptions to this rule if there is a good reason (artistic or otherwise). This also doesn't apply to smaller screens, where we might want to alter the layout to ensure that the text is still readable (e.g. the collapsing side bar in the Journal page). In other words, for smaller screens we might alter the layout, but for larger screens we generally just want to scale everything up.

There are really only 5 pages that need attention in terms of responsive design. Here are some reference images for what each page should approximately look like at 1440p:

1. Title (web/routes/title.tsx)

   • Don't forget about the "New Updates" text that appears whenever there are unseen changes in the changelog/What's New page.

2. Hub (web/routes/hub.tsx)

   • Don't forget the "Incoming Call", "New Levels", and "New Journal Pages" text that can appear here.
   • It is okay to ignore the level select dropdown for now. It's going to be redesigned later anyways.

3. Level (web/routes/level.tsx)

   • Don't forget various tooltips that can appear on this page.
   • Don't forget text that can appear on the board, like G.R.O.V.E.R.'s messages and the "wrong password" pop up.
   • Make sure to check the starting code and comments for each level to make sure they don't exceed the width of the editor. Horizontal scrollbars in starting code make for a bad experience and can cause players to miss key information in the comments in the code.

4. Journal (web/routes/journal.tsx)

   • Note that this shares some components with the Level page.

5. Dialog (web/routes/dialog_over_bg.tsx)

   • Out of all the pages, this is the one that could potentially benefit from a redesign for larger screens. On smaller screens, I had to position the text to the right so it doesn't cover Kalina's face, but we aren't as constrained on larger screens.

[albrow]

Some additional notes:

• There is a utility component in web/components/sizing_utility.tsx that just shows you the current breakpoint in the bottom right corner of the screen. It is probably a good idea to update this if we add new breakpoints and to use it during testing/development.
• The Steam/Electron build of the game currently uses a workaround for larger screen sizes. Basically we set the global zoom level of the browser window. This works really well but at a slight cost to performance/accessibility. If we have fully implemented responsive design for larger screens, we can remove this workaround.