From 2de1960fb53fb9e68b7b676858cc8ff95886a355 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Mon, 5 Aug 2024 19:05:39 +0800
Subject: [PATCH] BottomSheet: fix visual problem on iOS

---
 src/material/BottomSheet.module.css | 3 ++-
 src/settings/Settings.tsx           | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.module.css
index 0295b86..e48ce13 100644
--- a/src/material/BottomSheet.module.css
+++ b/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%;
     }
   }
 }
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 31a7424..0a76743 100644
--- a/src/settings/Settings.tsx
+++ b/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>