fix(docs): pin banner close button to top-right corner on mobile#867
Merged
fix(docs): pin banner close button to top-right corner on mobile#867
Conversation
With flex-direction: column the banner is now taller on mobile, so the base rule's top: 50% / translateY(-50%) centering floats the × button in the middle of the stacked content instead of sitting flush in the corner. Override with top: 0.25rem and transform: none inside the <=640px media query so the button pins to the top-right corner as intended.
Greptile SummaryThis follow-up PR correctly overrides Confidence Score: 5/5Safe to merge — two-line CSS-only fix with no functional risk. Change is a straightforward CSS override (two properties) with no logic, no dependencies, and a clear correctness rationale. No P0/P1 findings. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Browser viewport] --> B{width <= 640px?}
B -- No --> C[Base rule: top 50pct + translateY-50pct, button vertically centred]
B -- Yes --> D[Mobile override: flex-direction column, top 0.25rem + transform none, button pinned top-right]
Reviews (1): Last reviewed commit: "fix(docs): pin banner close button to to..." | Re-trigger Greptile |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Merged
jdx
added a commit
that referenced
this pull request
Apr 26, 2026
### 🐛 Bug Fixes - **(builtins)** silence pklr deprecation warnings on Builtins.pkl load by [@jdx](https://github.com/jdx) in [#880](#880) - **(ci)** serialize docs lint step by [@jdx](https://github.com/jdx) in [#874](#874) - **(config)** include main pkl path in cache fresh files by [@jdx](https://github.com/jdx) in [#879](#879) - **(docs)** stack banner message and link on mobile by [@jdx](https://github.com/jdx) in [#865](#865) - **(docs)** pin banner close button to top-right corner on mobile by [@jdx](https://github.com/jdx) in [#867](#867) ### 📚 Documentation - **(site)** show release version and github stars by [@jdx](https://github.com/jdx) in [#872](#872) ### 🔍 Other Changes - add pr-closer workflow by [@jdx](https://github.com/jdx) in [#876](#876) ### 📦️ Dependency Updates - bump communique 1.0.3 → 1.0.4 by [@jdx](https://github.com/jdx) in [#868](#868) - update anthropics/claude-code-action digest to 2da6cfa by [@renovate[bot]](https://github.com/renovate[bot]) in [#869](#869) - update anthropics/claude-code-action digest to 567fe95 by [@renovate[bot]](https://github.com/renovate[bot]) in [#870](#870) - bump communique to 1.1.2 by [@jdx](https://github.com/jdx) in [#875](#875) <!-- CURSOR_SUMMARY --> --- > [!NOTE] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 62ff432. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY --> Co-authored-by: mise-en-dev <[email protected]>
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.
Summary
Follow-up to #865. With
flex-direction: columnthe mobile banner is now taller, and the base rule'stop: 50%; transform: translateY(-50%)centering floats the × button in the vertical middle of the stacked content instead of in the top-right corner.Override
topandtransforminside the<=640pxmedia query so the button pins flush to the corner.Test plan
localStorage['jdx-banner-dismissed'], confirm the × button sits in the top-right corner rather than floating in the middle.Note
Low Risk
Low risk CSS-only change scoped to the mobile banner close button positioning with no functional or data-impacting logic changes.
Overview
Adjusts
docs/.vitepress/theme/banner.cssso that on<=640pxviewports the banner close button no longer usestop: 50%+translateY(-50%)centering.Within the mobile media query, it explicitly sets
top: 0.25remand removes the transform to keep the × button pinned to the top-right corner when the banner stacks vertically.Reviewed by Cursor Bugbot for commit fbf8067. Bugbot is set up for automated code reviews on this repo. Configure here.