Skip to content

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

Merged
jdx merged 2 commits intomainfrom
fix/banner-mobile-layout
Apr 24, 2026
Merged

fix(docs): stack banner and pin close button on mobile#119
jdx merged 2 commits intomainfrom
fix/banner-mobile-layout

Conversation

@jdx
Copy link
Copy Markdown
Owner

@jdx jdx commented Apr 24, 2026

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 the docs banner layout on small viewports.

Overview
Improves the docs site announcement banner layout on screens <=640px by switching it to a stacked (flex-direction: column) layout with tighter spacing/typography and balanced wrapping.

Repositions the banner close button on mobile by pinning it to the top-right and removing the vertical centering transform.

Reviewed by Cursor Bugbot for commit fa47dbb. Bugbot is set up for automated code reviews on this repo. Configure here.

jdx added 2 commits April 24, 2026 09:15
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-apps
Copy link
Copy Markdown

greptile-apps Bot commented Apr 24, 2026

Greptile Summary

This CSS-only fix improves the site banner on narrow viewports by switching to a column flex layout, shrinking the font slightly, and pinning the close button to the top-right corner at ≤640px. The changes are well-scoped and the transform: none override correctly cancels the desktop translateY(-50%) centering.

Confidence Score: 5/5

Safe to merge — isolated CSS change with no functional regressions.

Single-file CSS tweak with a clear, targeted fix. No logic, data, or API surface is touched. text-wrap: balance degrades gracefully on browsers that don't support it yet.

No files require special attention.

Important Files Changed

Filename Overview
docs/.vitepress/theme/banner.css Adds mobile responsive styles: switches banner to column flex layout, tightens spacing/font, and pins the close button to the top-right corner at ≤640px.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Banner renders] --> B{viewport width?}
    B --> |"> 640px"| C[flex-direction: row\ngap: 0.75rem\nfont-size: 0.9rem\npadding: 0.5rem 2.75rem]
    B --> |"≤ 640px"| D[flex-direction: column\ngap: 0.125rem\nfont-size: 0.8rem\npadding: 0.5rem 2.25rem\ntext-wrap: balance]
    C --> E[button: top 50% + translateY -50%\nright: 0.5rem — vertically centred]
    D --> F[button: top 0.25rem\nright: 0.25rem\ntransform: none — pinned top-right]
Loading

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

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request updates the mobile styling for the banner in docs/.vitepress/theme/banner.css, switching to a column layout and adjusting typography and spacing. Feedback suggests increasing the gap between stacked elements for better readability and increasing horizontal padding to prevent the close button from overlapping with the banner text.

font-size: 0.85rem;
padding: 0.4rem 2.5rem;
flex-direction: column;
gap: 0.125rem;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The gap: 0.125rem (2px) is extremely narrow for stacked elements. This may cause the banner message and the link to appear visually merged on mobile devices. Consider a slightly larger gap (e.g., 0.25rem or 0.375rem) to maintain better separation and readability.

Suggested change
gap: 0.125rem;
gap: 0.375rem;

flex-direction: column;
gap: 0.125rem;
font-size: 0.8rem;
padding: 0.5rem 2.25rem;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The horizontal padding has been reduced to 2.25rem. Since the close button is positioned at right: 0.25rem and has a font size of 1.25rem plus horizontal padding, its total width is approximately 2.25rem. This means the button will likely overlap with the banner content if the text wraps or is long enough to reach the padding boundary. Increasing the horizontal padding to 2.75rem (matching the desktop padding) would provide a safer margin between the text and the close button.

Suggested change
padding: 0.5rem 2.25rem;
padding: 0.5rem 2.75rem;

@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 24, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.11%. Comparing base (e5c63a5) to head (fa47dbb).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #119   +/-   ##
=======================================
  Coverage   94.11%   94.11%           
=======================================
  Files          26       26           
  Lines        4076     4076           
  Branches     4076     4076           
=======================================
  Hits         3836     3836           
  Misses        155      155           
  Partials       85       85           

☔ 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.

@jdx jdx merged commit 2a74a00 into main Apr 24, 2026
9 checks passed
@jdx jdx deleted the fix/banner-mobile-layout branch April 24, 2026 14:27
jdx added a commit that referenced this pull request Apr 24, 2026
A small patch release that keeps `communique generate --github-release`
from throwing away a whole CI run over a malformed final tool call, and
tidies up the docs-site announcement banner on mobile.

## Fixed

- **Salvage partial `submit_release_notes` submissions** — When the
model calls `submit_release_notes` with malformed arguments 3 times in a
row (e.g. `changelog` as an array instead of a string, or `release_body`
truncated by `max_tokens`), the agent no longer aborts the run. At the
retry limit it now attempts a lenient parse of the most recent
submission: non-string fields are coerced (arrays join with newlines,
objects are JSON-stringified), missing fields are derived from what's
present (`changelog` ⇄ `release_body`, `release_title` from the body's
first line), and only when every content field is empty does the run
fail. Real-world CI runs like
[endevco/aube#24903381187](https://github.com/endevco/aube/actions/runs/24903381187)
used to burn their entire research budget on this; they now recover
automatically. ([#120](#120))
(@jdx)
- **Better error diagnostics on unsalvageable submissions** — A new
`Error::MalformedSubmission` variant uses miette's `Diagnostic` to embed
the received JSON via `#[source_code]` and aggregate per-field reasons
across all attempts, so the CLI prints something like `missing
'release_body'; 'changelog' must be a string (got array)` alongside the
offending payload instead of the old opaque `malformed 3 times`.
([#120](#120)) (@jdx)
- **Docs announcement banner on mobile** — On viewports ≤640px the
banner was rendering cramped: `flex-wrap: nowrap` forced the message
onto two squeezed lines and the "Read more" link sat jammed against the
text. The banner now switches to `flex-direction: column` so the message
and link stack cleanly, with a slightly smaller font, tighter
line-height, `text-wrap: balance` for even line breaks, and the × close
button pinned flush to the top-right corner. Matches the same fix
rolling out across the mise, hk, aube, pitchfork, usage, and fnox docs
sites. ([#119](#119)) (@jdx)

## 💚 Sponsor communique

communique is developed by [@jdx](https://github.com/jdx) at
[**en.dev**](https://en.dev), an independent studio behind developer
tools like [mise](https://mise.jdx.dev/), [aube](https://aube.en.dev/),
hk, and more. Ongoing work on communique is funded by sponsorships.

If communique is drafting your release notes or changelogs, please
consider [sponsoring at en.dev](https://en.dev). Every sponsor —
individual or company — helps keep the project independent and actively
maintained.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk release-metadata update (version bumps and changelog/CLI docs
regen) with no functional code changes; main risk is minor
documentation/changelog formatting errors.
> 
> **Overview**
> Prepares the `v1.0.4` patch release by bumping the crate/CLI version
across `Cargo.toml`, `Cargo.lock`, `communique.usage.kdl`, and the
generated docs (`docs/cli/*`).
> 
> Updates `CHANGELOG.md` with a new `1.0.4` *Fixed* entry, but also
changes formatting around the `1.0.2`/`1.0.0` sections (some headings
are now concatenated onto the same line).
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
8f8b6ea. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant