One-handed mobile control

[SteveMicroNova]

What does this change intend to accomplish?

Move song controls, preset and add buttons to bottom of the screen on mobile

Adjust player page volume dropdown to more visibly include the underlying components, and limit height to make them scrollable without needing to scroll the whole page

Add many CSS breakpoints to ensure elements continue to work on the smallest screens

Home Page:
Before:

After:

Player Page:
Before:

After:

Checklist

• Have you tested your changes and ensured they work?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?
• If applicable, have you updated the CHANGELOG?
• Does your submission pass linting & tests? You can test on localhost using ./scripts/test
• If this is a UI change, have you tested it across multiple browser platforms on both desktop and mobile?

[SteveMicroNova]

I was far too hasty on this one, on reflection I've noticed that this implementation on the player page literally only works if you don't have volume bars to play with; I only tested on a streamer thus far as that's what I have at my desk
Revoking requested reviews and setting as draft

[SteveMicroNova]

Requesting Klayton and Lincoln as they've both had opinions along the way for this, requesting review from Jason as he requested this feature

[SteveMicroNova]

To my end, I have noticed that our unsafe volume sliders (that are very easy to bump and immediately set to max) are something of a hazard when you now have to scroll various nested dropdowns

My current solution has been to limit the length of the volume bars so that there is ample thumb space for scrolling, as a long term goal I'd like to make the volume sliders are made safer from misinput. I've looked into this somewhat, my current thoughts are to either add a debounce or make it so you have to specifically click and drag the slider knob to change volume on mobile, but I'm undecided

[klay2000]

As discussed IRL:
make this only happen on desktop
try to add some drag rejection to the volume sliders
remove scrolling through zones in groups

[SteveMicroNova]

I had to remake how the gradient background worked, if you have enough zones when you use the dropdown on the player page you leave the gradient behind as you scroll at 100vh, and at 100% the gradient stretches weird

Now it stays the same no matter where you scroll

[SteveMicroNova]

Most every change in this file is to ensure our webapp still has the same form and function even on comically tiny screens like the iPhone 4

[SteveMicroNova]

These are functionally equivalent to something like if 100vh > 100vw and if 100vw >= 100vh respectively

[SteveMicroNova]

This is deserved to be reflected as a comment in the code since it was concise and explained it well, so I've done that

[klay2000]

As discussed before we should probably clean up some of the scaling that uses px right now to make handling smaller screens easier, that's for another pr though.