Update HTML/CSS to accommodate mobile devices with notches

[angrytoenail]

Resolves #5979

[WithoutPants]

Sorry for the delay in testing this.

[WithoutPants]

This breaks styling on other viewports, since the safe-area-inset-x values are 0, when the bootstrap container-fluid class uses 15px as the left and right padding values. It also appeared to provide too much padding on my Pixel device when in landscape mode and added a horizontal scrollbar. If I removed these lines (leaving the viewport-fit change), then the page rendered correctly.

I tried the following which worked on my desktop PC, and it eliminated the scrolling on the Pixel, but still rendered with too much left padding in landscape mode:

padding-left: calc(max(env(safe-area-inset-left), 15px));
padding-right: calc(max(env(safe-area-inset-right), 15px));