Merge pull request 'fix(ui): keep last Keys card above ticker on mobile' (#21) from fix/keys-mobile-vesselapi-clip into master
All checks were successful
build-and-deploy / build-push-deploy (push) Successful in 3m8s

Reviewed-on: #21
This commit is contained in:
sirius 2026-08-29 10:06:02 -04:00
commit 5434dda2a9

View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>OSINT//DASHBOARD — Global Situational Awareness Terminal</title> <title>OSINT//DASHBOARD — Global Situational Awareness Terminal</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@ -155,7 +155,9 @@
/* ═══════════════ STAGE / VIEWS ═══════════════ */ /* ═══════════════ STAGE / VIEWS ═══════════════ */
.stage { .stage {
/* 100vh first for old browsers; 100dvh shrinks with mobile URL chrome */
height: calc(100vh - var(--topbar-h) - var(--dock-h)); 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; position: relative;
} }
.stage.scroll { overflow-y: auto; } .stage.scroll { overflow-y: auto; }
@ -382,7 +384,7 @@
/* ── Sub-views (News / Events / Alerts / ... ) ── */ /* ── Sub-views (News / Events / Alerts / ... ) ── */
.subview { .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; max-width: 1280px; margin: 0 auto;
} }
.subview > h2 { .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 { 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.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-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-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 { 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; } .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 { .dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
height: var(--dock-h); display: flex; flex-direction: column; 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); border-top: 1px solid var(--line);
background: linear-gradient(180deg, var(--bg-1), #050a13); background: linear-gradient(180deg, var(--bg-1), #050a13);
box-shadow: 0 -6px 30px rgba(0,0,0,0.5); box-shadow: 0 -6px 30px rgba(0,0,0,0.5);
@ -605,6 +609,16 @@
.tick-tag { display: none; } .tick-tag { display: none; }
.hud-chips { display: none; } .hud-chips { display: none; }
.map-hint { max-width: 80%; } .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) { @media (prefers-reduced-motion: reduce) {
.tick-track { animation: none; } .tick-track { animation: none; }