fix: use svh instead of vh

fivestar · Jan 2, 2025 · 03af71b · 03af71b
1 parent 414ddde
commit 03af71b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -316,18 +316,18 @@ textarea {
 
 /* layout/error */
 .error {
-  margin-top: 10vh;
-  margin-bottom: 10vh;
+  margin-top: 10svh;
+  margin-bottom: 10svh;
   text-align: center;
 
   .error__status {
-    font-size: 14vh;
+    font-size: 14svh;
     font-weight: var(--font-weight-bold);
     line-height: 1.4;
   }
   .error__message {
     margin-bottom: 24px;
-    font-size: 3vh;
+    font-size: 3svh;
     font-weight: var(--font-weight-bold);
     line-height: 1.4;
   }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { GoogleTagManager } from '@next/third-parties/google';
 import { Ubuntu, Noto_Sans_Display } from 'next/font/google';
 
@@ -19,6 +19,10 @@ export const metadata: Metadata = {
   }),
 };
 
+export const viewport: Viewport = {
+  viewportFit: 'cover',
+};
+
 const ubuntu = Ubuntu({
   weight: ['400', '500', '700'],
   subsets: ['latin'],

diff --git a/src/app/timer/TimeField.tsx b/src/app/timer/TimeField.tsx
@@ -45,7 +45,7 @@ export function TimeField({ value, onInput }: TimeFieldProps) {
     }
 
     const rect = inputRef.current.getBoundingClientRect();
-    pickerRef.current.style.top = rect.height + 'px';
+    //pickerRef.current.style.top = rect.height + 'px';
     pickerRef.current.style.right = '0';
     setShowTimePicker(true);
   };

diff --git a/src/app/timer/timer.css b/src/app/timer/timer.css
@@ -206,11 +206,9 @@
 .timer-layout[data-fullscreen='true'] {
   position: fixed;
   top: 0;
+  bottom: 0;
   left: 0;
   right: 0;
-  bottom: 0;
-  width: 100vw;
-  height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -242,15 +240,15 @@
   }
 
   &[data-rotated='true'] {
-    width: 100vh;
+    width: 100svh;
     height: 100vw;
-    top: calc((100vh - 100vw) / 2);
-    left: calc((100vw - 100vh) / 2);
+    top: calc((100svh - 100vw) / 2);
+    left: calc((100vw - 100svh) / 2);
     transform: rotate(90deg);
 
     .timer-display {
       .timer-display__time {
-        font-size: 36vh;
+        font-size: 36svh;
       }
     }
   }