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]

I found a specific type of apple phone that needed to fit in this bucket, so I expanded the definition of this everywhere

[SteveMicroNova]

I ought to make this an scss var to avoid such wide-touching bucketing changes, but I'm uncertain I want to bloat this PR any more
If you want that change to make it into this one, say so; otherwise I will make another discreet PR shortly after this is merged.

[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