From 545bd032a7766f904bb555d0a8ac9966e0dbca38 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Mon, 5 Aug 2024 03:42:15 +0000
Subject: [PATCH] fix(core): app height exceeds viewport of mobile (#7706)

TL;DR
use `100dvh` instead of `100vh`.

https://stackoverflow.com/a/72245072

PS: The `100dvh` is tested in Firefox in macOS

## Before
iPad
<img src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/c81548ed-7ca0-4f88-af7c-cce498958a28.png" width="250">

Phone
<img src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/4559554d-6f3f-445f-82c1-39a0dc2eb664.png" width="250">

## After
iPad
<img src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/51fe97f9-f488-432c-9866-20524efd08de.png" width="250">

Phone
<img src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/a05cce56-38a5-47df-a0c6-f757d94ef6b8.png" width="250">
---
 packages/frontend/core/src/components/workspace/index.css.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/core/src/components/workspace/index.css.ts b/packages/frontend/core/src/components/workspace/index.css.ts
index 4e33a98e9..721bffcd5 100644
--- a/packages/frontend/core/src/components/workspace/index.css.ts
+++ b/packages/frontend/core/src/components/workspace/index.css.ts
@@ -3,7 +3,7 @@ import { globalStyle, style } from '@vanilla-extract/css';
 export const appStyle = style({
   width: '100%',
   position: 'relative',
-  height: '100vh',
+  height: '100dvh',
   flexGrow: '1',
   display: 'flex',
   backgroundColor: cssVar('backgroundPrimaryColor'),