discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Disco DeDisco
2026-05-12 23:58:36 -04:00
parent c03fb2bab0
commit 5beb990623
1 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/static_src/scss/_note.scss
View File

@@ -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 { .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; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
@@ -9,7 +25,6 @@
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 0.1rem solid rgba(var(--secUser), 0.4); border: 0.1rem solid rgba(var(--secUser), 0.4);
border-radius: 0.5rem; border-radius: 0.5rem;
margin-bottom: 0.75rem;
.note-banner__body { .note-banner__body {
flex: 1; flex: 1;