fix(docs): stack banner and pin close button on mobile#119
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 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 Confidence Score: 5/5Safe 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. No files require special attention. Important Files Changed
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]
Reviews (1): Last reviewed commit: "fix(docs): pin banner close button to to..." | Re-trigger Greptile |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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.
| gap: 0.125rem; | |
| gap: 0.375rem; |
| flex-direction: column; | ||
| gap: 0.125rem; | ||
| font-size: 0.8rem; | ||
| padding: 0.5rem 2.25rem; |
There was a problem hiding this comment.
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.
| padding: 0.5rem 2.25rem; | |
| padding: 0.5rem 2.75rem; |
Codecov Report✅ All modified and coverable lines are covered by tests. 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. 🚀 New features to boost your workflow:
|
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 -->
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 the docs banner layout on small viewports.
Overview
Improves the docs site announcement banner layout on screens
<=640pxby 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.