jon/simplex-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix sidebar clipping on mobile (Logout cut off below the fold)

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Jon
2026-06-05 17:27:53 +01:00
parent 609e91c6de
commit 2194aa0f82
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
manager/templates/base.html
View File

@@ -92,6 +92,7 @@
background: var(--card); border-right: 1px solid var(--border); background: var(--card); border-right: 1px solid var(--border);
display: flex; flex-direction: column; display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh; 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; transition: width 0.2s ease, transform 0.2s ease;
z-index: 50; z-index: 50;
} }
@@ -174,7 +175,9 @@
/* ── Mobile: off-canvas sidebar ─────────────────────────────────── */ /* ── Mobile: off-canvas sidebar ─────────────────────────────────── */
@media (max-width: 768px) { @media (max-width: 768px) {
.sidebar { .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%); transform: translateX(-100%);
} }
html.collapsed .sidebar { width: 240px; } /* ignore collapse on mobile */ html.collapsed .sidebar { width: 240px; } /* ignore collapse on mobile */