diff --git a/src/renderer/index.html b/src/renderer/index.html
index 6d3e0ecf4..78dc806f9 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="Content-Security-Policy" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
         <script>
             (function () {
                 if (localStorage.getItem('umami.disabled') !== '1') {
diff --git a/src/renderer/layouts/default-layout.module.css b/src/renderer/layouts/default-layout.module.css
index 605b728cd..883b8e8df 100644
--- a/src/renderer/layouts/default-layout.module.css
+++ b/src/renderer/layouts/default-layout.module.css
@@ -5,6 +5,7 @@
         'main-content'
         'player';
     grid-template-rows: 0 calc(100vh - 90px) 90px;
+    grid-template-rows: 0 calc(100dvh - 90px) 90px;
     grid-template-columns: 1fr;
     gap: 0;
     height: 100%;
@@ -13,8 +14,10 @@
 
 .windows {
     grid-template-rows: 30px calc(100vh - 120px) 90px;
+    grid-template-rows: 30px calc(100dvh - 120px) 90px;
 }
 
 .macos {
     grid-template-rows: 30px calc(100vh - 120px) 90px;
+    grid-template-rows: 30px calc(100dvh - 120px) 90px;
 }
diff --git a/src/renderer/layouts/mobile-layout/mobile-layout.module.css b/src/renderer/layouts/mobile-layout/mobile-layout.module.css
index 66388b5a4..2614dc750 100644
--- a/src/renderer/layouts/mobile-layout/mobile-layout.module.css
+++ b/src/renderer/layouts/mobile-layout/mobile-layout.module.css
@@ -6,10 +6,12 @@
         'main-content'
         'player';
     grid-template-rows: 0 calc(100vh - 90px) 90px;
+    grid-template-rows: 0 calc(100dvh - 90px) 90px;
     grid-template-columns: 1fr;
     gap: 0;
     width: 100vw;
     height: 100vh;
+    height: 100dvh;
     overflow: hidden;
     background: var(--theme-colors-background);
 }
@@ -17,6 +19,7 @@
 .windows,
 .macos {
     grid-template-rows: 30px calc(100vh - 120px) 90px;
+    grid-template-rows: 30px calc(100dvh - 120px) 90px;
 }
 
 .drawer-button {
