copilot/frosty
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 Packages Wiki Activity Actions

Don't use dvh

Browse source 
Causes image layout vertical shifting on Chrome mobile.
This commit is contained in:
Tommy Chow 2024-09-15 22:03:31 -07:00
parent c7d6de8924
commit 4f7258c635
3 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/app/layout.tsx
View file

@ -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,
)}
>

2
web/src/app/page.tsx
View file

@ -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

2
web/src/components/FeatureCard.tsx
View file

@ -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'