Add "safe area inset" setting to reader

This commit is contained in:
schroda
2026-05-08 01:39:48 +02:00
parent 6d3eb4266b
commit d1e70c2609
15 changed files with 153 additions and 40 deletions

View File

@@ -74,7 +74,9 @@ const BaseReader = ({
'tapZoneInvertMode',
'shouldShowReadingModePreview',
'shouldShowTapZoneLayoutPreview',
'safeAreaInset',
);
const safeAreaInset = useReaderSettingsStore((state) => state.safeAreaInset);
const scrollElementRef = useRef<HTMLDivElement | null>(null);
@@ -228,10 +230,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)',
pt: safeAreaInset.top ? 'env(safe-area-inset-top)' : undefined,
pb: safeAreaInset.bottom ? 'env(safe-area-inset-bottom)' : undefined,
pr: safeAreaInset.right ? 'env(safe-area-inset-right)' : undefined,
pl: safeAreaInset.left ? 'env(safe-area-inset-left)' : undefined,
marginLeft: `${readerNavBarWidth}px`,
transition: (theme) =>
`width 0.${theme.transitions.duration.shortest}s, margin-left 0.${theme.transitions.duration.shortest}s`,