Prevent UI from cutting off on mobile devices

[kemp]

When the web UI is added to the iOS home screen (via the "Add to Home Screen" option) the navigation tabs are cut off.

This PR adds some padding so they aren't cut off anymore.

Before	After

Notice the buttons on the bottom are no longer cut off. Please ignore the error that appears, it is unrelated.

Side note: if there is interest in adding more "PWA" functionality to the UI (e.g. change the icon on the home screen, add a message when it's disconnected, let me know and I will open another PR 😄 ).

[dosipod]

@kemp Looks fine , apparently the issue is with newer iOS devices and sure you are free to do more improvements , if you do then please make sure you have github actions enabled on your repo so the changes can be quickly tested .

[Jacobnordvall]

Why add the extra padding on the header/wrapper?
The middle space is already a bit too tiny.

My suggestion is to remove the extra padding on the top part and make it add less on the bottom. Just need enough to fix the overlap right?

The apps already have this solved at least. Can you discern from an app and wherever you openened the gui?

[kemp]

The proposed change adds only the minimum necessary padding defined by the user agent (iOS, in this case).

We could put in a pixel number so that it's manual, but this would be prone to breakage as it would be specific per device and not a general solution.

[Jacobnordvall]

Yeah if its tested properly and works in all environments its all good. but from the screenshots youre adding the safe space wrong at top. it adds space for the big notch underr the top toggles instead of above. meaning the notch will still overlay those but youll get empy padding bellow the notch.

[blazoncek]

@kemp thanks and it may be ok for this particular PR but please follow this for any future PR.