Respect device safe area inset in reader

closes #1094

CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - (**Server Update**) Add an option to disable showing information when the server got updated
 - (**Manga**) Add an option to include client data during migration
 - (**Migrate**) Add bulk migration
+- (**Reader**) Respect the safe inset area (e.g., top-notch) of devices
 
 ### Changed
 

src/features/reader/overlay/components/ReaderPageNumber.tsx

@@ -68,7 +68,7 @@ const BaseReaderPageNumber = ({
                 position: 'fixed',
                 left: readerNavBarWidth,
                 right: 0,
-                bottom: (theme) => `max(calc(${theme.spacing(1)} + ${scrollbar.xSize}px), env(safe-area-inset-bottom))`,
+                bottom: (theme) => `calc(${theme.spacing(1)} + max(${scrollbar.xSize}px, env(safe-area-inset-bottom)))`,
                 alignItems: 'center',
                 transition: (theme) => `left 0.${theme.transitions.duration.shortest}s`,
             }}

src/features/reader/screens/Reader.tsx

@@ -228,6 +228,10 @@ const BaseReader = ({
                 maxWidth: `calc(100vw - ${readerNavBarWidth}px)`,
                 width: `calc(100vw - ${readerNavBarWidth}px)`,
                 height: `100vh`,
+                pt: 'env(safe-area-inset-top)',
+                pb: 'env(safe-area-inset-bottom)',
+                pr: 'env(safe-area-inset-right)',
+                pl: 'env(safe-area-inset-left)',
                 marginLeft: `${readerNavBarWidth}px`,
                 transition: (theme) =>
                     `width 0.${theme.transitions.duration.shortest}s, margin-left 0.${theme.transitions.duration.shortest}s`,