From 9fe89792a3c18c807c1b5c32f25b124b5d59eb96 Mon Sep 17 00:00:00 2001 From: iFlip721 Date: Thu, 3 Sep 2026 06:47:23 -0400 Subject: [PATCH] fix(ui): unbreak two overlays trapped by their ancestors' stacking/containing blocks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #55. 1. Active Streams "View Channel" slide-over (the reported bug) /active is a stage route, so ActiveStreamsScreen renders inside .mq-stage-content, which is `position: relative; z-index: 1` and therefore a stacking context. The slide-over's `z-index: 85` was clamped to level 1 there, losing to .topbar (z-index 20) — so the topbar's "Search everything..." box, Docs button and theme toggle painted over the panel's header, hiding the channel logo, name, LIVE pill and metadata line. The fixed backdrop also painted behind the topbar, leaving the search input clickable and focusable while the panel was open. Fixed by wrapping the slide-over in , matching the existing precedent in CopyConfirmModal.vue. Geometry is unchanged (the backdrop was already fixed/inset:0 with no transformed ancestor) — only paint order moves. The panel now covers the topbar for its full height, exactly like ChannelDrawer, LogsDrawer and DocsDrawer already do. EPGDetailScreen uses the same .stream-view-bg class and was never affected, because /epg-detail is not a stage route. 2. Global search click-away backdrop .topbar-search centred itself with `transform: translateX(-50%)`. A transform makes an element the containing block for its position:fixed descendants, so SearchResults' .sr-backdrop (position: fixed; inset: 0) collapsed from the viewport to the 480x36 search box — clicking anywhere outside the box never dismissed the results (only Escape did). Fixed by centring with a negative half-width margin instead of a transform; pixel-identical placement at both the 480px and 90vw branches, no transform. The input is also raised above the backdrop so clicking back into the box to edit the query moves the caret instead of closing the results. Landmine comments added at each trap (.mq-stage-content, .stream-view-bg, .topbar-search, .sr-backdrop) so the next overlay added to a stage screen or nested under the topbar does not repeat either failure. Verified: `npm run build` (vue-tsc + vite) passes. Both failures and both fixes were reproduced and measured in-browser against the real stylesheet — .sr-backdrop goes 480x36 -> full viewport, outside clicks change from hitting page content to hitting the backdrop, result rows and the input stay hit- testable, and the search box stays exactly centred. --- src/App.vue | 19 ++- src/components/SearchResults.vue | 4 + src/screens/ActiveStreamsScreen.vue | 207 ++++++++++++++-------------- src/styles.css | 14 +- 4 files changed, 139 insertions(+), 105 deletions(-) diff --git a/src/App.vue b/src/App.vue index cca848c..9071dbf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -392,14 +392,27 @@ onBeforeUnmount(() => { diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue index 95012e6..6af61c8 100644 --- a/src/components/SearchResults.vue +++ b/src/components/SearchResults.vue @@ -71,6 +71,10 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey));