From 049e9d68a878acd493fb361ef6e50560fadfa85a Mon Sep 17 00:00:00 2001 From: Jon Seager Date: Wed, 11 Feb 2026 09:53:43 +0000 Subject: [PATCH] fix: mobile fixed nav bar and detail page polish - Make nav bar fixed on mobile with safe-area-inset-top support for notched devices (10% reduction) and 1rem minimum for non-notched - Adjust timeline sticky month headings to sit flush below the fixed nav with matching top/bottom padding - Update IntersectionObserver rootMargin to account for fixed nav height so stuck-state accent border triggers correctly - Increase main content top padding on mobile for balanced spacing on detail pages - Add remaining field to bag edit form with +/- stepper buttons - Make admin page passkey/token forms responsive with icon-only mobile delete/revoke buttons - Make detail page action buttons stack vertically on mobile with equal width --- static/css/input.css | 32 ++++++++++++++++++++++++++++++++ templates/base.html | 7 +++++-- templates/pages/timeline.html | 8 +++++++- templates/partials/nav.html | 2 +- 4 files changed, 45 insertions(+), 4 deletions(-) diff --git a/static/css/input.css b/static/css/input.css index 295171a..5c2abb2 100644 --- a/static/css/input.css +++ b/static/css/input.css @@ -213,6 +213,32 @@ input.input-field[type="number"] { background-color: var(--accent-subtle); } +/* ── Mobile fixed nav ─────────────────────────────────────────── */ + +@media (max-width: 767px) { + :root { + --fixed-nav-h: calc( + max(1rem, env(safe-area-inset-top, 0px) * 0.9) + 3.25rem + ); + } + + .nav-bar { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 30; + background-color: var(--page); + padding-top: max(1rem, calc(env(safe-area-inset-top, 0px) * 0.9)); + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + main { + padding-top: calc(var(--fixed-nav-h) + 2rem); + } +} + /* ── Sticky Submit ────────────────────────────────────────────── */ .sticky-submit { @@ -502,6 +528,12 @@ input.input-field[type="number"] { .timeline-item { margin-bottom: 1rem; } + + /* Stick below fixed nav; 0.5rem tucks behind nav, 1rem visible = matches bottom */ + .timeline-heading { + top: calc(var(--fixed-nav-h) - 0.5rem); + padding-top: 1.5rem; + } } /* ── Data page ─────────────────────────────────────────────────── */ diff --git a/templates/base.html b/templates/base.html index 0f26c0e..5697e31 100644 --- a/templates/base.html +++ b/templates/base.html @@ -2,7 +2,10 @@ - +
{% include "partials/nav.html" %} {% block content %}{% endblock %}