diff --git a/studio-hub/src/styles/hub.css b/studio-hub/src/styles/hub.css
index 49603cc98..bac9978e3 100644
--- a/studio-hub/src/styles/hub.css
+++ b/studio-hub/src/styles/hub.css
@@ -33,7 +33,7 @@ body {
     radial-gradient(circle at 85% 10%, rgba(122, 231, 199, 0.12), transparent 22%),
     radial-gradient(circle at 50% 100%, rgba(255, 200, 116, 0.07), transparent 26%),
     linear-gradient(145deg, #04070d 0%, #07111d 45%, #03060a 100%);
-  min-height: 100vh;
+  min-height: 100dvh;
 }
 
 body::before {
@@ -53,12 +53,12 @@ button { font: inherit; cursor: pointer; border: none; background: none; }
 a { color: inherit; text-decoration: none; }
 
 /* ── LAYOUT ── */
-#app { min-height: 100vh; position: relative; z-index: 1; }
+#app { min-height: 100dvh; position: relative; z-index: 1; }
 
 .shell {
   display: grid;
   grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
-  min-height: 100vh;
+  min-height: 100dvh;
 }
 
 /* ── SIDEBAR ── */
@@ -70,7 +70,7 @@ a { color: inherit; text-decoration: none; }
   flex-direction: column;
   position: sticky;
   top: 0;
-  height: 100vh;
+  height: 100dvh;
   overflow-y: auto;
 }
 
@@ -947,11 +947,13 @@ body.theme-light .issue-item { background: var(--panel-2); }
     top: 0;
     left: 0;
     width: 270px;
-    height: 100vh;
+    height: 100vh; /* fallback for browsers without dvh support */
+    height: 100dvh;
     z-index: 100;
     box-shadow: 4px 0 24px rgba(0,0,0,0.4);
     padding-top: env(safe-area-inset-top, 24px);
     padding-left: env(safe-area-inset-left, 0);
+    padding-bottom: env(safe-area-inset-bottom, 0);
   }
 
   .shell.mobile-nav-open .sidebar {