Repository navigation
fix: hide the Vue School banner while search is open on mobile - #208
Merged
Merged
Conversation
The banner is position:fixed with z-index 99999 and DocSearch's container is z-index 200, so on mobile the banner covered the full-screen search input and Cancel button.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the
 |
Deploying nativescript-docs-latest with
|
| Latest commit: |
d1c4b77
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://b336b59f.nativescript-docs-beta.pages.dev |
| Branch Preview URL: | https://fix-docsearch-above-banner.nativescript-docs-beta.pages.dev |
Replaces the DocSearch z-index override with a narrower rule: below DocSearch's 768px full-screen breakpoint, hide #bb-banner-container while body.DocSearch--active is set. Desktop and the closed state are unchanged.
NathanWalker
changed the title
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
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.
Problem
On mobile, opening search on docs.nativescript.org shows the Vue School "Free Weekend" banner over the top of the search input and Cancel button, so you can't see or tap the field.
banner.jspins its container (#bb-banner-container) withposition: fixed; z-index: 99999. DocSearch's modal isz-index: 200, and at 768px and below it goes full-screen with the input at the very top, right under the banner.Fix
Add a
<style>head entry right after the banner script that hides the banner only while search is open on mobile:DocSearch--activeto<body>while the modal is open and removes it on close, so the banner comes back as soon as search closes.!importantoverrides the banner script's own inlinedisplayon the container. The script forcesdisplaywith!importantonly on its inner iframe, never on the container.No theme changes.
How to test
On a phone (or devtools at about 390px wide), open the Cloudflare Pages preview for this PR and wait for the banner. Tap search: the banner should disappear and the input and Cancel button should be fully visible. Close search: the banner should come back.
I checked this in headless Chromium against docs.nativescript.org with the rule injected:
#docsearch-input