BottomSheet: fix visual problem on iOS

src/material/BottomSheet.module.css

@@ -22,11 +22,12 @@
   @media (max-width: 560px) {
     & {
       left: 0;
-      top: var(--safe-area-inset-top, 0);
+      top: 0;
       transform: none;
       bottom: 0;
       height: 100vh;
       height: 100dvh;
+      max-height: 100%;
     }
   }
 }

src/settings/Settings.tsx

@@ -49,7 +49,7 @@ const Settings: ParentComponent = () => {
     <Scaffold
       topbar={
         <AppBar position="static">
-          <Toolbar variant="dense">
+          <Toolbar variant="dense" sx={{paddingTop: "var(--safe-area-inset-top, 0px)"}}>
             <IconButton onClick={[navigate, -1]}>
               <CloseIcon />
             </IconButton>