BottomSheet: fix visual problem on iOS

package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "tutu",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "private": true,
   "type": "module",

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>
@@ -94,16 +94,15 @@ const Settings: ParentComponent = () => {
           <ListItem>
             <ListItemText secondary="Regular">Fonts</ListItemText>
           </ListItem>
-          <ListItem>
+          <ListItem onClick={(e) =>
+                  $settings.setKey("prefetchTootsDisabled", !settings$().prefetchTootsDisabled)
+                }>
             <ListItemText secondary="Tutu will download toots before you scroll to the position.">
               Prefetch Toots
             </ListItemText>
             <ListItemSecondaryAction>
               <Switch
                 checked={!settings$().prefetchTootsDisabled}
-                onChange={(e) =>
-                  $settings.setKey("prefetchTootsDisabled", !e.target.checked)
-                }
               />
             </ListItemSecondaryAction>
           </ListItem>