From d4fd09294ded1580b66548ba269b64e81d65092e Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Tue, 5 May 2026 13:42:10 +0200
Subject: [PATCH] Respect device safe area inset in reader

closes #1094
---
 CHANGELOG.md                                                | 1 +
 src/features/reader/overlay/components/ReaderPageNumber.tsx | 2 +-
 src/features/reader/screens/Reader.tsx                      | 4 ++++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d8268e6..0e138dd8 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/features/reader/overlay/components/ReaderPageNumber.tsx b/src/features/reader/overlay/components/ReaderPageNumber.tsx
index b2f92424..be1ad9d0 100644
--- a/src/features/reader/overlay/components/ReaderPageNumber.tsx
+++ b/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`,
             }}
diff --git a/src/features/reader/screens/Reader.tsx b/src/features/reader/screens/Reader.tsx
index 4b9a7674..a010d081 100644
--- a/src/features/reader/screens/Reader.tsx
+++ b/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`,