fix: viewport issue with safe area (#568)

ivan-dalmet · web-flow · commit 60138c322d6a · 2025-03-25T14:37:56.000+01:00
diff --git a/src/app/Document.tsx b/src/app/Document.tsx
@@ -18,10 +18,6 @@ export const Document = ({ children }: { children: ReactNode }) => {
   return (
     <html lang={locale?.lang} dir={locale?.dir}>
       <head>
-        <meta
-          name="viewport"
-          content="width=device-width,initial-scale=1,viewport-fit=cover"
-        />
         <meta
           name="apple-mobile-web-app-status-bar-style"
           content="black-translucent"
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { Metadata } from 'next';
+import { Metadata, Viewport } from 'next';
 
 import { Document } from '@/app/Document';
 import { NextLoader } from '@/app/NextLoader';
@@ -15,6 +15,12 @@ export const metadata: Metadata = {
   description: 'Opinionated UI starter',
 };
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  viewportFit: 'cover',
+};
+
 export default async function RootLayout({
   children,
 }: {
diff --git a/src/components/Viewport/index.tsx b/src/components/Viewport/index.tsx
@@ -12,7 +12,7 @@ export const Viewport = (props: FlexProps) => {
       // Allows new units used if supported
       style={{
         maxWidth: '100dvw',
-        minHeight: '100dvh',
+        minHeight: '100lvh',
       }}
       {...props}
     />
diff --git a/src/features/app/AppLayoutPage.tsx b/src/features/app/AppLayoutPage.tsx
@@ -73,7 +73,6 @@ export const AppLayoutPage = ({
     <AppLayoutPageContext.Provider value={value}>
       <Flex
         position="relative"
-        pt="safe-top"
         as={Scrollbars}
         direction="column"
         flex={1}
@@ -86,7 +85,7 @@ export const AppLayoutPage = ({
         }}
         {...rest}
       >
-        <PageContainer pt={4} pb={16} {...containerProps}>
+        <PageContainer mt="safe-top" pt={4} pb={16} {...containerProps}>
           {children}
         </PageContainer>
         <Box w="full" h="0" pb="safe-bottom" />
