fix(docs): stack banner and pin close button on mobile

[jdx]

Summary

• On narrow viewports the site banner rendered cramped: flex-wrap: nowrap forced the message onto two squeezed lines while the "Read more" link sat jammed against the text.
• At <=640px, switch the banner to flex-direction: column so the message and link stack cleanly. Shrink font slightly, tighten line-height, add text-wrap: balance for 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

• Visit the docs site on a mobile device (or DevTools <=640px) after deploy and confirm the banner stacks cleanly with the × button in the top-right corner.

---

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.css for <=640px to stack banner text/link vertically (flex-direction: column), tighten spacing/typography, and add text-wrap: balance to 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.}

[greptile-apps]

Greptile Summary

This PR fixes the site banner layout on narrow viewports (≤640px) by switching to flex-direction: column so the message and "Read more" link stack cleanly, and pins the close button to the top-right corner with top: 0.25rem; right: 0.25rem; transform: none. The change is purely additive CSS within an existing media query — no logic or behaviour outside the stylesheet is affected.

Confidence Score: 5/5

Safe 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

Filename	Overview
docs/.vitepress/theme/banner.css	Mobile media query updated to stack banner content vertically, shrink font, and pin close button to top-right corner.

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]

Loading

_{Reviews (1): Last reviewed commit: "fix(docs): pin banner close button to to..." | Re-trigger Greptile}

[gemini-code-assist]

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.

[gemini-code-assist]

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]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.03%. Comparing base (90ad7f1) to head (365d049).
⚠️ Report is 1 commits behind head on main.

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.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.