brief banner: portal over the wordmark + h2 header area (small margin from viewport edges) w. position: fixed; top: 0.5rem; left: 0.5rem; right: 0.5rem; z-index: 10000 — mirrors #id_guard_portal's lift contract so the Brief escapes every game overlay's stacking context the same way the guard portal does; without this lift the Brief landed in document flow as nextSibling of #id_brief_banner_anchor (inside .container, which itself has no stacking context) — fine on pages w. no fixed overlays, but on room.html the gate / role-select / sig / sky backdrops (z-index 100-200, position: fixed; inset: 0, backdrop-filter: blur(...)) ate the Brief alive: the user saw the post-share / invite Brief outline blurred behind the Gaussian glass instead of in front of it; centring via max-width: 960px + auto inline margins matches .container's max-width so landscape viewports see the Brief centred over the page-content column rather than spanning the sidebar gutters; existing margin-bottom: 0.75rem dropped (vestigial — fixed positioning doesn't push siblings, and there's only one Brief at a time so the inline-stack case the margin was hedging on never happens); Django messages banner (the .note-banner.note-banner--message shell rendered by {% if messages %} in base.html for magic-link confirmations / errors) inherits the same portal treatment since both kinds share the same base class — UX is now uniform regardless of which overlay the user is staring through when the message arrives; 42 Brief-touching FTs (test_core_bud_btn + test_bill_my_buds + test_bill_my_notes) green w. no positional assertion regressions — Selenium clicks .note-banner__nvm / .note-banner__fyi / etc. the same w. position:fixed as it did inline
Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,22 @@
|
||||
// ── Note banner (slides in below page h2 after unlock) ─────────────────────
|
||||
// ── Note banner (Brief portal) ─────────────────────────────────────────────
|
||||
// Portals over the page wordmark + h2 header area when shown — `position:
|
||||
// fixed` w. `z-index: 10000` lifts it above every game overlay (gate /
|
||||
// role-select / sig / sky backdrops at z 100-200, tray at 310, kit bag at
|
||||
// 318+, etc.) the same way `#id_guard_portal` does. Without this lift the
|
||||
// Brief would land in document flow inside `.container` (after the
|
||||
// `#id_brief_banner_anchor` div) and disappear behind any `position: fixed`
|
||||
// overlay that sat above it in the z-stack — e.g. on room.html the gate
|
||||
// overlay's Gaussian-blur backdrop ate the Brief alive.
|
||||
|
||||
.note-banner {
|
||||
position: fixed;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 10000;
|
||||
max-width: 960px; // match `.container` max-width so wide viewports
|
||||
margin-left: auto; // see the Brief centred above the page rather
|
||||
margin-right: auto; // than stretched across landscape sidebars
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
@@ -9,7 +25,6 @@
|
||||
backdrop-filter: blur(8px);
|
||||
border: 0.1rem solid rgba(var(--secUser), 0.4);
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
.note-banner__body {
|
||||
flex: 1;
|
||||
|
||||
Reference in New Issue
Block a user