fix(ui): sidebar stays above a phone's address bar and does not scroll the page

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XuNrwLf5EFWCMHzfoEvnpm

1 files changed, 7 insertions, 0 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index a2ef80e..bae1a82 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -403,6 +403,12 @@ a:hover { text-decoration: underline; }
   flex-direction: column;
   width: 240px;
   height: calc(100vh - var(--nav-h) - var(--music-bar-h) - var(--index-dock-h));
+  /* The visible viewport where the browser has the unit: on a phone or tablet
+     `100vh` is the height with the address bar hidden, which leaves the foot of
+     the list under the bar while it shows. The line above is the fallback. */
+  height: calc(100dvh - var(--nav-h) - var(--music-bar-h) - var(--index-dock-h));
+  /* Reaching either end of the list must not start scrolling the page behind. */
+  overscroll-behavior: contain;
   background: var(--sidebar-bg);
   border-right: 1px solid var(--border);
   padding: 16px 0 0;
@@ -2515,6 +2521,7 @@ a.transfer-name {
     left: -240px;
     top: 52px;
     height: calc(100vh - 52px - var(--music-bar-h) - var(--index-dock-h));
+    height: calc(100dvh - 52px - var(--music-bar-h) - var(--index-dock-h));
     z-index: 50;
     transition: left 0.2s;
     box-shadow: none;