Dynamic viewport scaling

[UZ9]

This PR aims to add dynamic viewport scaling to the algorithms page. Rather than hardcoded heights, all UI elements are now controlled via flexboxes. As it's no longer needed, I have also removed the "Change Canvas Size" control.

Overview

Before:

After:

Testing

I confirmed the scaling with Chromium, Firefox, and a fairly scuffed webkit linux distribution, but if someone with safari could run this locally on their end it would be appreciated. Thanks!

[luciankt]

I've been hoping forever that someone would do this! Thank you Ryder 😄
Seems to work for me on Safari.

[andriawang6]

I tested on a Mac with Safari and Chrome and it worked fine on both.

A possible drawback to note is if the screen is too small, with the current setup, the user can scroll off the canvas and still access the buttons. However, with this change, only the buttons that are visible/fit in the screen are accessible, since it's impossible to scroll past the canvas. Not sure the best way to handle this from a UX standpoint, since keeping all functionality is ideal.

[UZ9]

I agree--unfortunately the current UI layout for vistool is by no means easy to fit on a mobile device. This also holds true for the main vistool page:

I do think eventually this can be a possibility, but with a few major refactorings:

Main Page

The main page needs to be mobile friendly. This should be the easiest part, as we already have the sidebar ready to go and we only need to shuffle a few elements around. A media query changing the flex to column on mobile should give us roughly the result we need. Just changing this already led to a far more pleasant layout:

The blob might need to be just removed altogether on mobile due to it being a bit finniky with webkit.

Algorithm Page

This one would be significantly harder to optimize for mobile, but I have a few ideas to try to reuse some of the existing code. Here were my thoughts on this:

• All algorithm settings could be moved to a toggleable dropdown and are otherwise hidden. Upon loading an algorithm page for the first time, you will be shown these first
• All pseudocode on the Canvas needs to be removed. The font rendering can be a bit meh, the animations seem like a pain to maintain, and their positions on the canvas are inconsistent and incredibly hard to fit on mobile. I'm actually working on a replacement for this by using the new pseudocode sidebar for animations, but with how that code is currently written some major refactorings are needed. Stay tuned for a PR hopefully soonish?
• We could support zooming in and out of the canvas (scroll on desktop, pinch zoom on mobile) to help anyone who wants to focus on a particular element. I haven't taken too much of a look at the existing canvas logic but canvas zooming has been a solved problem for a fair amount of time.
• Animation controls could be fixed to the bottom of the screen on mobile, allowing easy pausing/rewind (I could see this happening a lot where you're trying to show an algorithm to a friend)

If time allows, I could prepare a few figma mockup designs and see where we could take it from there.

In the meantime, I could explicitly add an override to allow overflow on smaller devices (to get our inconvenient but still possible setup for mobile back)

[UZ9]

The layout for the homescreen mobile view wasn't too bad to do, so I snuck it in along with the overflow fix mentioned above:

Temporary overflow behavior fix (same as pre-dynamic scaling) allowing you to still select all controls:

I also saved the blob (it's now at the bottom):