Update mobile safe area insets

[flourish86]

Describe the bug

When viewing Icinga Web 2 on an actual device (e.g. iPhone > X), elements are obscured by hardware elements (“notch” on iPhone).

To Reproduce

Navigate to icingaweb2 on an iPhone X or later.

Expected behavior

The obscured elements should be inset correctly.

• The css functions names for the insets have to be renamed, like outlined here. https://www.bram.us/2017/09/14/introducing-user-agent-variables-rendering-sites-fullscreen-in-safari-on-iphone-x/
• Also the set insets have to be updated to the markup changes we made for changing to flexbox layout.

Screenshots

Your Environment

Include as many relevant details about the environment you experienced the problem in

• master
• Web browser used: Mobile Safari