From 5465eccfce94a53ad48cfdafbc90e7462d387840 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 12 Nov 2026 19:35:53 -0700 Subject: The top bar stays on screen while the page scrolls. "I'm thinking maybe topnav with the Coinos logo search/settings and profile avatar should stick around on screen even as you scroll the feed" (Adam, 2026-11-12). .brand-header is sticky at the top of every page that has it (feed, wallet, settings, profiles), as a frosted strip of the page background the width of the column, pulled out by the padding it adds so nothing moves at rest, clear of a notch by the safe-area inset. html scroll-padding-top keeps a post scrolled into view from landing under it. It sits at z-index 30, under every overlay (40 and up) and level with the bottom nav; nothing fixed lives inside it, so its backdrop-filter traps nothing. Checked on a 390px phone and a 1300px desktop against the live public feed scrolled 1400px; chat-layout, features-smoke and account-access tests pass Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01VMan6UKGJyuGyZFxddYRxS --- src/style.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'src') diff --git a/src/style.css b/src/style.css index 803979f..ec9fd18 100644 --- a/src/style.css +++ b/src/style.css @@ -95,6 +95,8 @@ * { box-sizing: border-box; } html { + /* a post scrolled into view lands below the sticky top bar */ + scroll-padding-top: 72px; /* Reserve the scrollbar's gutter always, so it doesn't appear the instant the history list fills the page and shrink the viewport — that width change re-centered the balance carousel's snapped card, the "slight move @@ -176,6 +178,17 @@ input { scroll-margin-top: 12px; } .logo-full { height: 40px; flex: none; color: var(--ink); display: grid; place-items: center; } .logo-full svg { height: 40px; width: auto; display: block; } .brand h1 { font-size: 19px; } +/* The top bar (logo, search, settings, avatar) stays on screen while the + page scrolls under it (Adam, 2026-11-12). A frosted strip the width of the + column, padded out by the same amount it's pulled in, so the layout at + rest doesn't move; the safe-area inset keeps it clear of a notch. */ +.brand-header { + position: sticky; top: 0; z-index: 30; + margin: -8px -16px; padding: 8px 16px; + padding-top: max(8px, env(safe-area-inset-top)); + background: color-mix(in srgb, var(--bg) 84%, transparent); + -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); +} .badge { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; -- cgit v1.2.3