From 773d204f689c22b06ea5c19d06e484095937f06c Mon Sep 17 00:00:00 2001 From: Sirius DevOps Date: Sat, 29 Aug 2026 09:47:25 -0400 Subject: [PATCH] fix(ui): keep last Keys card above ticker on mobile Stage uses 100dvh (100vh fallback) plus safe-area so the scrollport ends above the dock. Subviews get extra bottom padding; phone key forms wrap with 44px tap targets. --- app/static/index.html | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/app/static/index.html b/app/static/index.html index c5737c3..65f004d 100644 --- a/app/static/index.html +++ b/app/static/index.html @@ -2,7 +2,7 @@ - + OSINT//DASHBOARD — Global Situational Awareness Terminal @@ -155,7 +155,9 @@ /* ═══════════════ STAGE / VIEWS ═══════════════ */ .stage { + /* 100vh first for old browsers; 100dvh shrinks with mobile URL chrome */ height: calc(100vh - var(--topbar-h) - var(--dock-h)); + height: calc(100dvh - var(--topbar-h) - var(--dock-h) - env(safe-area-inset-bottom, 0px)); position: relative; } .stage.scroll { overflow-y: auto; } @@ -382,7 +384,7 @@ /* ── Sub-views (News / Events / Alerts / ... ) ── */ .subview { - padding: 1.2rem clamp(1rem, 3vw, 2rem) 2.2rem; + padding: 1.2rem clamp(1rem, 3vw, 2rem) calc(var(--dock-h) + 1.5rem); max-width: 1280px; margin: 0 auto; } .subview > h2 { @@ -488,7 +490,7 @@ .key-status { font-size: 0.68rem; font-family: 'Share Tech Mono', monospace; padding: 0.18rem 0.55rem; border-radius: 3px; white-space: nowrap; } .key-status.set { background: rgba(83,240,165,0.1); color: var(--green); box-shadow: 0 0 10px rgba(83,240,165,0.3); } .key-status.missing { background: rgba(255,93,93,0.1); color: var(--red); box-shadow: 0 0 10px rgba(255,93,93,0.2); } - .key-desc { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.7rem; } + .key-desc { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.7rem; overflow-wrap: anywhere; } .key-hint { font-size: 0.7rem; color: var(--muted); opacity: 0.8; margin-top: 0.15rem; font-family: 'Share Tech Mono', monospace; } .key-form { display: flex; gap: 0.5rem; } .key-form input { flex: 1; background: var(--bg-0); border: 1px solid var(--line); border-radius: 4px; padding: 0.5rem 0.6rem; color: var(--text); font-size: 0.82rem; font-family: 'Share Tech Mono', monospace; } @@ -523,6 +525,8 @@ .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; height: var(--dock-h); display: flex; flex-direction: column; + padding-bottom: env(safe-area-inset-bottom, 0px); + box-sizing: content-box; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-1), #050a13); box-shadow: 0 -6px 30px rgba(0,0,0,0.5); @@ -605,6 +609,16 @@ .tick-tag { display: none; } .hud-chips { display: none; } .map-hint { max-width: 80%; } + .key-grid { grid-template-columns: minmax(0, 1fr); } + .key-card { min-width: 0; overflow: hidden; } + .key-form { flex-wrap: wrap; } + .key-form input { + flex: 1 1 100%; + width: 100%; + min-width: 0; + min-height: 44px; + } + .key-form .btn { min-height: 44px; min-width: 44px; } } @media (prefers-reduced-motion: reduce) { .tick-track { animation: none; }