fix(docs): stack banner and pin close button on mobile#603
Merged
Conversation
On narrow viewports the site banner rendered cramped: with flex-wrap: nowrap the message was forced to two squeezed lines while the 'Read more' link sat jammed against it. At <=640px, switch the banner to flex-direction: column so the message and link stack, shrink font slightly, tighten line-height, add text-wrap: balance for even line breaks, and nudge the close button flush to the corner.
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 PR fixes the site banner layout on narrow viewports (≤640px) by switching to Confidence Score: 5/5Safe to merge — a small, self-contained CSS fix with no risk to non-mobile layouts. All changes are confined to a single CSS media query. The base (desktop) styles are untouched, browser support for text-wrap: balance degrades gracefully on older browsers, and the button-positioning fix is straightforward. No P0/P1 findings. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Browser renders banner] --> B{viewport width}
B -->|gt 640px| C[Row layout\nflex-direction: row\nbutton: vertically centered]
B -->|lte 640px| D[Column layout\nflex-direction: column\ngap: 0.125rem]
D --> E[Message text stacked above link]
D --> F[Close button pinned\ntop 0.25rem / right 0.25rem\ntransform: none]
C --> G[Close button at 50% translateY]
Reviews (1): Last reviewed commit: "fix(docs): pin banner close button to to..." | Re-trigger Greptile |
Contributor
There was a problem hiding this comment.
Code Review
This pull request updates the mobile styling for the banner component in the documentation theme, introducing a column layout, adjusted spacing, and repositioning the close button. A review comment suggests reverting the horizontal padding to its original value to prevent potential text overlap with the close button on narrow screens.
| flex-direction: column; | ||
| gap: 0.125rem; | ||
| font-size: 0.8rem; | ||
| padding: 0.5rem 2.25rem; |
Contributor
There was a problem hiding this comment.
The horizontal padding has been reduced from 2.5rem to 2.25rem. Given that the close button is positioned at right: 0.25rem and has a total width of approximately 2.25rem (including its internal padding and the icon), its left edge sits at about 2.5rem from the right of the banner. With the banner's padding at 2.25rem, the centered text could potentially overlap with the button on narrow screens. Maintaining the original 2.5rem horizontal padding would ensure the text always clears the button.
Suggested change
| padding: 0.5rem 2.25rem; | |
| padding: 0.5rem 2.5rem; |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #603 +/- ##
=======================================
Coverage 79.03% 79.03%
=======================================
Files 48 48
Lines 7235 7235
Branches 7235 7235
=======================================
Hits 5718 5718
Misses 1140 1140
Partials 377 377 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Merged
jdx
pushed a commit
that referenced
this pull request
May 3, 2026
### 🚀 Features - **(complete)** auto-completion for usage shebang scripts by [@jdx](https://github.com/jdx) in [#620](#620) ### 🐛 Bug Fixes - **(docs)** stack banner and pin close button on mobile by [@jdx](https://github.com/jdx) in [#603](#603) ### 📚 Documentation - **(site)** show release version and github stars by [@jdx](https://github.com/jdx) in [#604](#604) - add cross-site announcement banner by [@jdx](https://github.com/jdx) in [#600](#600) - fix banner dark-mode contrast by [@jdx](https://github.com/jdx) in [#601](#601) - respect banner expires field by [@jdx](https://github.com/jdx) in [#602](#602) - prefix star count with ★ glyph and populate it on deploy by [@jdx](https://github.com/jdx) in [#606](#606) - integrate Commander.js, oclif and yargs by [@gaojunran](https://github.com/gaojunran) in [#616](#616) - integrate Typer and Click by [@gaojunran](https://github.com/gaojunran) in [#619](#619) ### 🔍 Other Changes - **(docs)** remove shrill.en.dev analytics script by [@jdx](https://github.com/jdx) in [#614](#614) - **(release)** append en.dev sponsor blurb to release notes by [@jdx](https://github.com/jdx) in [#598](#598) - switch analytics from gtm to plausible by [@jdx](https://github.com/jdx) in [#609](#609) - pin taiki-e/install-action to commit SHA by [@jdx](https://github.com/jdx) in [#610](#610) - rename CLAUDE.md to AGENTS.md and symlink by [@jdx](https://github.com/jdx) in [#618](#618) ### 📦️ Dependency Updates - bump communique to 1.1.2 by [@jdx](https://github.com/jdx) in [#605](#605) - lock file maintenance by [@renovate[bot]](https://github.com/renovate[bot]) in [#607](#607) - update autofix-ci/action action to v1.3.4 by [@renovate[bot]](https://github.com/renovate[bot]) in [#611](#611) - update apple-actions/import-codesign-certs action to v7 by [@renovate[bot]](https://github.com/renovate[bot]) in [#612](#612) - update taiki-e/install-action digest to fc9eae0 by [@renovate[bot]](https://github.com/renovate[bot]) in [#613](#613) --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
tmeijn
pushed a commit
to tmeijn/dotfiles
that referenced
this pull request
May 8, 2026
This MR contains the following updates: | Package | Update | Change | |---|---|---| | [usage](https://github.com/jdx/usage) | minor | `3.2.1` → `3.3.0` | MR created with the help of [el-capitano/tools/renovate-bot](https://gitlab.com/el-capitano/tools/renovate-bot). **Proposed changes to behavior should be submitted there as MRs.** --- ### Release Notes <details> <summary>jdx/usage (usage)</summary> ### [`v3.3.0`](https://github.com/jdx/usage/blob/HEAD/CHANGELOG.md#330---2026-05-03) [Compare Source](jdx/usage@v3.2.1...v3.3.0) ##### 🚀 Features - **(complete)** auto-completion for usage shebang scripts by [@​jdx](https://github.com/jdx) in [#​620](jdx/usage#620) ##### 🐛 Bug Fixes - **(docs)** stack banner and pin close button on mobile by [@​jdx](https://github.com/jdx) in [#​603](jdx/usage#603) ##### 📚 Documentation - **(site)** show release version and github stars by [@​jdx](https://github.com/jdx) in [#​604](jdx/usage#604) - add cross-site announcement banner by [@​jdx](https://github.com/jdx) in [#​600](jdx/usage#600) - fix banner dark-mode contrast by [@​jdx](https://github.com/jdx) in [#​601](jdx/usage#601) - respect banner expires field by [@​jdx](https://github.com/jdx) in [#​602](jdx/usage#602) - prefix star count with ★ glyph and populate it on deploy by [@​jdx](https://github.com/jdx) in [#​606](jdx/usage#606) - integrate Commander.js, oclif and yargs by [@​gaojunran](https://github.com/gaojunran) in [#​616](jdx/usage#616) - integrate Typer and Click by [@​gaojunran](https://github.com/gaojunran) in [#​619](jdx/usage#619) ##### 🔍 Other Changes - **(docs)** remove shrill.en.dev analytics script by [@​jdx](https://github.com/jdx) in [#​614](jdx/usage#614) - **(release)** append en.dev sponsor blurb to release notes by [@​jdx](https://github.com/jdx) in [#​598](jdx/usage#598) - switch analytics from gtm to plausible by [@​jdx](https://github.com/jdx) in [#​609](jdx/usage#609) - pin taiki-e/install-action to commit SHA by [@​jdx](https://github.com/jdx) in [#​610](jdx/usage#610) - rename CLAUDE.md to AGENTS.md and symlink by [@​jdx](https://github.com/jdx) in [#​618](jdx/usage#618) ##### 📦️ Dependency Updates - bump communique to 1.1.2 by [@​jdx](https://github.com/jdx) in [#​605](jdx/usage#605) - lock file maintenance by [@​renovate\[bot\]](https://github.com/renovate\[bot]) in [#​607](jdx/usage#607) - update autofix-ci/action action to v1.3.4 by [@​renovate\[bot\]](https://github.com/renovate\[bot]) in [#​611](jdx/usage#611) - update apple-actions/import-codesign-certs action to v7 by [@​renovate\[bot\]](https://github.com/renovate\[bot]) in [#​612](jdx/usage#612) - update taiki-e/install-action digest to [`fc9eae0`](jdx/usage@fc9eae0) by [@​renovate\[bot\]](https://github.com/renovate\[bot]) in [#​613](jdx/usage#613) </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - At any time (no schedule defined) - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever MR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this MR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this MR, check this box --- This MR has been generated by [Mend Renovate](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4xNjguNSIsInVwZGF0ZWRJblZlciI6IjQzLjE2OC41IiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJSZW5vdmF0ZSBCb3QiLCJhdXRvbWF0aW9uOmJvdC1hdXRob3JlZCIsImRlcGVuZGVuY3ktdHlwZTo6bWlub3IiXX0=-->
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
flex-wrap: nowrapforced the message onto two squeezed lines while the "Read more" link sat jammed against the text.<=640px, switch the banner toflex-direction: columnso the message and link stack cleanly. Shrink font slightly, tighten line-height, addtext-wrap: balancefor even two-line breaks, and pin the close button flush to the top-right corner.Matches the same fix going out across the mise, hk, aube, pitchfork, usage, fnox, and communique docs.
Test plan
Note
Low Risk
Low risk CSS-only change limited to docs banner layout on small viewports; main risk is minor visual regressions on mobile.
Overview
Adjusts
docs/.vitepress/theme/banner.cssfor<=640pxto stack banner text/link vertically (flex-direction: column), tighten spacing/typography, and addtext-wrap: balanceto avoid cramped wrapping.Repositions the close button on mobile by pinning it to the top-right and removing the vertical centering transform.
Reviewed by Cursor Bugbot for commit 365d049. Bugbot is set up for automated code reviews on this repo. Configure here.