Don't use dvh

Causes image layout vertical shifting on Chrome mobile.
tommyxchow · Sep 16, 2024 · 4f7258c · 4f7258c
1 parent c7d6de8
commit 4f7258c
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
     <html lang='en' suppressHydrationWarning>
       <body
         className={twJoin(
-          'mx-auto min-h-dvh max-w-screen-lg bg-neutral-100 font-sans text-neutral-950 dark:bg-black dark:text-neutral-100',
+          'mx-auto min-h-screen max-w-screen-lg bg-neutral-100 font-sans text-neutral-950 dark:bg-black dark:text-neutral-100',
           fontSans.variable,
         )}
       >

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
@@ -134,7 +134,7 @@ export default function Home() {
 
         <div className='z-10 justify-self-center p-8'>
           <video
-            className='h-[75dvh] max-h-[800px] rounded-xl border border-neutral-300 bg-black object-contain py-4 dark:border-neutral-900'
+            className='h-[75vh] max-h-[800px] rounded-xl border border-neutral-300 bg-black object-contain py-4 dark:border-neutral-900'
             src='/video.webm'
             autoPlay
             loop

diff --git a/web/src/components/FeatureCard.tsx b/web/src/components/FeatureCard.tsx
@@ -10,7 +10,7 @@ export function FeatureCard({ caption, screenshot }: FeatureCardProps) {
     <figure className='grid items-end overflow-clip rounded-2xl border border-neutral-300 dark:border-neutral-900 [&>*]:col-start-1 [&>*]:row-start-1'>
       <div className='justify-self-center px-12 pt-12'>
         <Image
-          className='max-h-[75dvh] w-fit rounded-xl border dark:border-neutral-900'
+          className='max-h-[75vh] w-fit rounded-xl border dark:border-neutral-900'
           src={screenshot}
           alt={caption}
           placeholder='blur'