diff --git a/index.html b/index.html
index a0780420..c115e3e3 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,9 @@
-
+
+
+
{
maxWidth: `calc(100vw - (100vw - 100%) - ${navBarWidth}px)`,
position: 'relative',
mt: `${appBarHeight}px`,
- mb: `${bottomBarHeight}px`,
+ pb: `calc(${bottomBarHeight}px + ${!bottomBarHeight ? 'env(safe-area-inset-bottom)' : '0px'})`,
}}
>
@@ -181,7 +181,7 @@ export const App: React.FC = () => (
-
+
diff --git a/src/modules/core/components/tabs/TabsWrapper.tsx b/src/modules/core/components/tabs/TabsWrapper.tsx
index 81261c82..7300df60 100644
--- a/src/modules/core/components/tabs/TabsWrapper.tsx
+++ b/src/modules/core/components/tabs/TabsWrapper.tsx
@@ -7,14 +7,9 @@
*/
import Box, { BoxProps } from '@mui/material/Box';
-import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
-export const TabsWrapper = ({ children, ...props }: BoxProps) => {
- const { appBarHeight } = useNavBarContext();
-
- return (
-
- {children}
-
- );
-};
+export const TabsWrapper = ({ children, ...props }: BoxProps) => (
+
+ {children}
+
+);
diff --git a/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx b/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx
index b931f555..5da4a647 100644
--- a/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx
+++ b/src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx
@@ -22,7 +22,7 @@ export const StyledGroupedVirtuoso = ({
{...props}
style={{
...style,
- height: `calc(100vh - ${heightToSubtract}px - ${appBarHeight}px - ${bottomBarHeight}px)`,
+ height: `calc(100vh - ${heightToSubtract}px - ${appBarHeight}px - ${bottomBarHeight}px - ${!bottomBarHeight ? 'env(safe-area-inset-bottom)' : '0px'})`,
}}
/>
);
diff --git a/src/modules/navigation-bar/components/DefaultNavBar.tsx b/src/modules/navigation-bar/components/DefaultNavBar.tsx
index 92d54e52..2078d463 100644
--- a/src/modules/navigation-bar/components/DefaultNavBar.tsx
+++ b/src/modules/navigation-bar/components/DefaultNavBar.tsx
@@ -91,7 +91,9 @@ export function DefaultNavBar() {
const appBarRef = useRef(null);
useResizeObserver(
appBarRef,
- useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef.current]),
+ useCallback(() => {
+ setAppBarHeight(appBarRef.current?.clientHeight ?? 0);
+ }, [appBarRef.current]),
);
useLayoutEffect(() => {
if (!override.status) {
@@ -132,6 +134,7 @@ export function DefaultNavBar() {
sx={{
position: 'fixed',
marginLeft: actualNavBarWidth,
+ pt: 'env(safe-area-inset-top)',
width: `calc(100% - ${actualNavBarWidth}px)`,
zIndex: theme.zIndex.drawer,
}}
@@ -142,7 +145,7 @@ export function DefaultNavBar() {
sx={{
position: 'absolute',
left: 0,
- width: navBarWidth,
+ width: `calc(${navBarWidth}px + env(safe-area-inset-left))`,
...(!isCollapsed && { display: 'none' }),
alignItems: 'center',
}}
@@ -155,7 +158,7 @@ export function DefaultNavBar() {
{
const { t } = useTranslation();
+ const theme = useTheme();
const { setBottomBarHeight } = useNavBarContext();
const location = useLocation();
const navigate = useNavigate();
@@ -36,7 +38,21 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
return (
theme.zIndex.drawer - 1 }}
+ sx={{
+ position: 'fixed',
+ bottom: 0,
+ left: 0,
+ right: 0,
+ pb: 'env(safe-area-inset-bottom)',
+ pl: 'env(safe-area-inset-left)',
+ pr: 'env(safe-area-inset-right)',
+ zIndex: theme.zIndex.drawer - 1,
+ }}
+ style={{
+ ...(theme.applyStyles('dark', {
+ '--Paper-overlay': 'unset',
+ }) as Omit),
+ }}
elevation={3}
>
{
position: 'fixed',
left: readerNavBarWidth,
right: 0,
- bottom: (theme) => `calc(${theme.spacing(1)} + ${scrollbarXSize}px)`,
+ bottom: (theme) => `max(calc(${theme.spacing(1)} + ${scrollbarXSize}px), env(safe-area-inset-bottom))`,
alignItems: 'center',
transition: (theme) => `left 0.${theme.transitions.duration.shortest}s`,
}}
diff --git a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
index d3f699e4..1338d973 100644
--- a/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
+++ b/src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx
@@ -64,6 +64,7 @@ export const ReaderOverlayHeaderMobile = ({ isVisible }: MobileHeaderProps) => {
left: 0,
right: `${scrollbarYSize}px`,
p: 2,
+ pt: (theme) => `env(safe-area-inset-top, ${theme.spacing(2)})`,
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
pointerEvents: 'all',
}}
diff --git a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
index c98d90c0..cfe32101 100644
--- a/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
+++ b/src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
@@ -45,7 +45,7 @@ export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomB
sx={{
position: 'fixed',
right: `${scrollbarYSize}px`,
- bottom: `${scrollbarXSize}px`,
+ bottom: 0,
left: 0,
gap: 2,
pointerEvents: 'all',
@@ -56,6 +56,7 @@ export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomB
sx={{
alignItems: 'center',
backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95),
+ pb: `max(${scrollbarXSize}px, env(safe-area-inset-bottom))`,
}}
>