From 2194aa0f8294863f2cba058a2b57fb9558cab357 Mon Sep 17 00:00:00 2001 From: Jon Date: Fri, 5 Jun 2026 17:27:53 +0100 Subject: [PATCH] Fix sidebar clipping on mobile (Logout cut off below the fold) The sidebar was height:100vh with no overflow, so on mobile the bottom-pinned footer (network status + Logout) fell below the visible area (browser toolbar) with no way to reach it. Add overflow-y:auto and use 100dvh on mobile so the sidebar matches the visible viewport; 100vh kept as fallback. Co-Authored-By: Claude Opus 4.8 --- manager/templates/base.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/manager/templates/base.html b/manager/templates/base.html index aff730e..d5f70ec 100644 --- a/manager/templates/base.html +++ b/manager/templates/base.html @@ -92,6 +92,7 @@ background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; + overflow-y: auto; /* scroll within the sidebar if it's taller than the screen */ transition: width 0.2s ease, transform 0.2s ease; z-index: 50; } @@ -174,7 +175,9 @@ /* ── Mobile: off-canvas sidebar ─────────────────────────────────── */ @media (max-width: 768px) { .sidebar { - position: fixed; left: 0; top: 0; height: 100vh; width: 240px; + position: fixed; left: 0; top: 0; width: 240px; + height: 100vh; height: 100dvh; /* dvh tracks the visible area incl. browser toolbar */ + overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-100%); } html.collapsed .sidebar { width: 240px; } /* ignore collapse on mobile */