From 4f7258c6351d0e617d8b81fc9834fd3ae68199f3 Mon Sep 17 00:00:00 2001
From: Tommy Chow <tommyxchow@gmail.com>
Date: Sun, 15 Sep 2024 22:03:31 -0700
Subject: [PATCH] Don't use dvh Causes image layout vertical shifting on Chrome
 mobile.

---
 web/src/app/layout.tsx             | 2 +-
 web/src/app/page.tsx               | 2 +-
 web/src/components/FeatureCard.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 5c3a7bec..f0960f40 100644
--- 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
index 7211b98e..407302ba 100644
--- 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
index 52ecf7a9..732e48ad 100644
--- 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'