From 0158ce955f2b4b54c9260c60b815a24742c6e80d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 21 Jul 2026 03:10:01 +0000
Subject: [PATCH] CANON-041: replace 100vh with 100dvh in Studio Hub sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On iOS Safari with dynamic address bar, 100vh includes the browser chrome
so the fixed mobile sidebar overflows below the visible viewport — bottom
nav links clip and are unreachable. 100dvh tracks the dynamic visible
viewport correctly. Also adds padding-bottom safe-area inset for notched
devices and the 100vh fallback for older browsers that lack dvh support.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 studio-hub/src/styles/hub.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

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 {