Use full height and width of viewport on iOS

- render appbar background color on ios status bar
- handle "home indicator" safe area inset

src/modules/navigation-bar/components/DefaultNavBar.tsx

@@ -91,7 +91,9 @@ export function DefaultNavBar() {
     const appBarRef = useRef<HTMLDivElement | null>(null);
     useResizeObserver(
         appBarRef,
-        useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef.current]),
+        useCallback(() => {
+            setAppBarHeight(appBarRef.current?.clientHeight ?? 0);
+        }, [appBarRef.current]),
     );
     useLayoutEffect(() => {
         if (!override.status) {
@@ -132,6 +134,7 @@ export function DefaultNavBar() {
                 sx={{
                     position: 'fixed',
                     marginLeft: actualNavBarWidth,
+                    pt: 'env(safe-area-inset-top)',
                     width: `calc(100% - ${actualNavBarWidth}px)`,
                     zIndex: theme.zIndex.drawer,
                 }}
@@ -142,7 +145,7 @@ export function DefaultNavBar() {
                             sx={{
                                 position: 'absolute',
                                 left: 0,
-                                width: navBarWidth,
+                                width: `calc(${navBarWidth}px + env(safe-area-inset-left))`,
                                 ...(!isCollapsed && { display: 'none' }),
                                 alignItems: 'center',
                             }}
@@ -155,7 +158,7 @@ export function DefaultNavBar() {
                     <Stack
                         sx={{
                             ml: `${isCollapsed ? navBarWidth : 0}px`,
-                            width: `calc(100% - ${isCollapsed ? navBarWidth : 0}px)`,
+                            width: `calc(100% - (${isCollapsed ? navBarWidth : 0}px + env(safe-area-inset-left)))`,
                             flexDirection: 'row',
                             alignItems: 'center',
                         }}

src/modules/navigation-bar/components/DesktopSideBar.tsx

@@ -119,6 +119,7 @@ export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) =
         >
             <Box
                 sx={{
+                    pl: 'env(safe-area-inset-left)',
                     minWidth: isCollapsed ? MIN_WIDTH_COLLAPSED : MIN_WIDTH_EXTENDED,
                     maxWidth: isCollapsed ? MAX_WIDTH_COLLAPSED : MAX_WIDTH_EXTENDED,
                 }}

src/modules/navigation-bar/components/MobileBottomBar.tsx

@@ -12,12 +12,14 @@ import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { CSSObject, useTheme } from '@mui/material/styles';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
 import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
 
 export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
     const { t } = useTranslation();
+    const theme = useTheme();
     const { setBottomBarHeight } = useNavBarContext();
     const location = useLocation();
     const navigate = useNavigate();
@@ -36,7 +38,21 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
     return (
         <Paper
             ref={ref}
-            sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer - 1 }}
+            sx={{
+                position: 'fixed',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                pb: 'env(safe-area-inset-bottom)',
+                pl: 'env(safe-area-inset-left)',
+                pr: 'env(safe-area-inset-right)',
+                zIndex: theme.zIndex.drawer - 1,
+            }}
+            style={{
+                ...(theme.applyStyles('dark', {
+                    '--Paper-overlay': 'unset',
+                }) as Omit<CSSObject, 'accentColorsd'>),
+            }}
             elevation={3}
         >
             <BottomNavigation