Conversation
…ntaining blocks 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 <Teleport to="body">, 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…ntaining blocks
Closes #55.
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: 1and therefore a stacking context. The slide-over'sz-index: 85was 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.
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.