fix(web): prevent navigation from overlapping video controls

[Snowknight26]

Fixes #9405, fixes #9174.

Can't really say I like how the fix is done but there are a couple challenges here:

• ActivityStatus component takes up real estate
  • it's not always shown
• To accommodate for that, video controls have to be shifted up
• Navigation areas have to account for that
• Navigation area icon should stay centered

In my opinion there are several things that could be done differently:

• ActivityStatus component should be implemented differently and not be floating in the bottom right. I'm no designer though so it stays where it is.
  • the video container wouldn't need any bottom margins
• The navigation bars shouldn't have bottom margins
  • but then how do we ensure video controls are accessible?

Then there's also mobile and video aspect ratio/viewport aspect ratio to consider. At the moment this change causes the navigation area to be even smaller (since the bottom margins have been doubled):

[danieldietzler]

This is a working fix, but long term this should be refactored as part of a major refactoring. I'd like to hear @alextran1502 thoughts on this though.

[zackpollard]

I'm not a big fan of using absolute margins or paddings anywhere, this should be solvable without that and will likely just lead to more problems in the future if we did merge this. I think as you say it probably makes sense to just move the components currently overlapping with the bar to a different area of the screen where they won't overlap.

Probably don't want to merge this in its current state

[Snowknight26]

I'm not a big fan of using absolute margins or paddings anywhere, this should be solvable without that and will likely just lead to more problems in the future if we did merge this.

I agree, though if it helps justify this PR at least until a better fix can be implemented, this does fix two regressions:

• fix(web): Move stack slideshow container higher in the DOM #8998
  • margins were removed not realizing that the reason they were there was for video controls (and not stack navigation)
• fix(web): ui tweaks #8757
  • video controls were effectively moved up without realizing the navigation overlapped them, but nav margins weren't changed

[Thinkscape]

@Snowknight26 Another workaround would be to not make the navigation panes be 100% height.
If they were i.e. the size of the arrow images + buffer (i.e. 50 px), they would have big enough hit-zone to be useful, but would not overlap any controls.

Here's the node from Google Photos:

The little arrow right -> shows up when cursor hovers roughly to the right 40% of asset, but it looks like it's handled by Javascript - which gives you much better control over bubbling and targets. In our implementation it's a :hover and an overlapping node.

[Thinkscape]

Example with video player in google photos.

Notice how the <video> has lower z-index than all the other controls, but none of the controls overlap too much of it.

[Snowknight26]

Whoops, deleted the branch by accident. I think that's definitely a better approach. If we're happy with something like that I can attempt to implement something similar on this PR.

[Snowknight26]

Closing in favor of #9455.