fix(docs): stack banner and pin close button on mobile by jdx · Pull Request #437 · jdx/fnox

jdx · 2026-04-24T14:21:55Z

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 scoped to the docs banner’s small-screen layout; potential impact is limited to mobile rendering/regressions in banner positioning.

Overview
Improves the docs top banner layout on narrow screens (<=640px) by switching it to a stacked column layout, tightening typography/spacing, and enabling text-wrap: balance for cleaner line breaks.

Repositions the close button on mobile by pinning it to the top-right and removing the vertical-centering transform so it no longer overlaps or shifts with multi-line content.

^{Reviewed by Cursor Bugbot for commit 688bc02. Bugbot is set up for automated code reviews on this repo. Configure here.}

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 · 2026-04-24T14:23:05Z

Greptile Summary

This PR fixes the site banner on narrow viewports by switching to a column flex layout at ≤640px, adding text-wrap: balance, and pinning the close button to the top-right corner. The change is a pure CSS tweak limited to the @media (max-width: 640px) block and carries no functional risk.

Confidence Score: 5/5

Safe to merge — pure CSS scoped to a narrow-viewport media query with no logic changes

Single CSS file change confined to an existing @media (max-width: 640px) block. All properties degrade gracefully (text-wrap: balance falls back to default wrap on older browsers). No JS, no build config, no data path touched. No P0/P1 findings.

No files require special attention

Important Files Changed

Filename	Overview
docs/.vitepress/theme/banner.css	Adds mobile-specific overrides at ≤640px: switches banner to column flex layout, tightens gap/font/line-height, applies text-wrap:balance, and pins the close button to the top-right corner

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Viewport width?] -->"|> 640px"| B[Desktop layout\nflex-direction: row\npadding: 0.5rem 2.75rem\nbutton: top 50% translateY-50%]
    A -->|"≤ 640px"| C[Mobile layout\nflex-direction: column\npadding: 0.5rem 2.25rem\nfont-size: 0.8rem\ntext-wrap: balance]
    C --> D[Close button\ntop: 0.25rem\nright: 0.25rem\ntransform: none]
    B --> E[Close button\ntop: 50%\nright: 0.5rem\ntransform: translateY-50%]

_{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, switching to a column layout and adjusting spacing. Feedback suggests increasing the gap between elements and enlarging the touch target for the close button to improve mobile accessibility and ergonomics.

gemini-code-assist · 2026-04-24T14:23:54Z

+    flex-direction: column;
+    gap: 0.125rem;


The gap: 0.125rem (2px) is very tight for stacked elements on mobile. Increasing this slightly (e.g., to 0.25rem or 0.375rem) would improve the visual separation between the message and the link, making the banner feel less cramped and improving touch ergonomics.

Suggested change

flex-direction: column;

gap: 0.125rem;

flex-direction: column;

gap: 0.25rem;

gemini-code-assist · 2026-04-24T14:23:54Z

+  .jdx-banner button {
+    top: 0.25rem;
+    right: 0.25rem;
+    transform: none;
  }


The close button has a small touch target on mobile (approximately 20px in height). Increasing the padding and pinning it to the corner improves accessibility and makes it easier for users to dismiss the banner on touch devices.

.jdx-banner button { top: 0; right: 0; padding: 0.5rem; transform: none; }

@bglusman

@bglusman

@bglusman

## Upstream release Bumps bundled fnox binary from 1.20.0 to 1.22.0. **Release**: https://github.com/jdx/fnox/releases/tag/v1.22.0 ## Release notes v1.22.0 introduces a top-level library API for embedding fnox in Rust applications, and fixes a sharp edge in `fnox set` that could turn an encrypted secret into plaintext. ## Added **Top-level `Fnox` library API** ([#442](jdx/fnox#442)) -- @bglusman Downstream Rust consumers can now use fnox as a library in three lines instead of replicating the internals of `GetCommand::run`: ```rust use fnox::Fnox; let fnox = Fnox::discover()?; // walks up + merges parent + local + global config let value = fnox.get("MY_KEY").await?; let names = fnox.list()?; ``` The new `Fnox` type lives in `src/library.rs` and is re-exported from the crate root. Highlights: - `Fnox::discover()` mirrors the binary's full config-discovery and merge chain via `Config::load_smart`, including the `FNOX_PROFILE` env var. - `Fnox::open(path)` loads an explicit config without the upward-search/merge behavior. - `Fnox::with_profile("staging")` builder for non-default profiles. - `get()` returns `FnoxError::SecretNotFound` with a populated "Did you mean…" suggestion, matching the CLI's UX so callers don't need to recompute it. - `Fnox` is cheap to clone (`Config` is held behind an `Arc`) and safe to hold across `.await`. `set()` is intentionally not part of this first cut; it'll get its own design pass. ## Fixed **`fnox set` no longer silently downgrades encrypted secrets to plaintext** ([#439](jdx/fnox#439)) -- @rpendleton When multiple providers were configured without a `default_provider`, running `fnox set` on an existing secret without `--provider` would write the new value as plaintext while leaving the original `provider = "..."` key in place. The next `fnox get` then failed trying to "decrypt" a value that was no longer encrypted. `fnox set` now reuses the secret's existing provider before falling back to `default_provider` or plaintext, so updates stay encrypted and readable without having to pass `--provider` on every call: ```bash fnox set --provider age MY_SECRET "original-value" # encrypted with age fnox set MY_SECRET "new-value" # still encrypted with age ``` **Deterministic provider ordering in the generated schema** ([#432](jdx/fnox#432)) -- @jdx Within-category provider ordering in `build/generate_providers.rs` was inheriting `fs::read_dir` order, which is OS- and filesystem-dependent. That non-determinism flowed into `docs/public/schema.json` and caused autofix.ci to keep reshuffling 100+ lines between runs. A secondary sort by provider name fixes the churn; running `fnox schema` twice now produces byte-identical output. **Mobile docs banner layout** ([#437](jdx/fnox#437)) -- @jdx At `<=640px` the announcement banner now switches to a column layout with the close button pinned to the top-right corner, instead of cramming the message and "Read more" link onto one squeezed line. ## Changed - Docs site nav now shows the current release version (read from `Cargo.toml` at build time) and a GitHub star count, matching the mise/aube docs ([#443](jdx/fnox#443)) -- @jdx - Added a dismissible cross-site announcement banner that fetches its config from `jdx.dev/banner.json` and respects the `expires` field ([#434](jdx/fnox#434), [#436](jdx/fnox#436)) -- @jdx ## New Contributors * @bglusman made their first contribution in [#442](jdx/fnox#442) **Full Changelog**: jdx/fnox@v1.21.0...v1.22.0 ## 💚 Sponsor fnox fnox is maintained by [@jdx](https://github.com/jdx) under [**en.dev**](https://en.dev) — a small independent studio building developer tooling like [mise](https://mise.jdx.dev/), [aube](https://aube.en.dev/), hk, and more. Keeping fnox secure, maintained, and free is funded by sponsors. If fnox is handling secrets or config for you or your team, please consider [sponsoring at en.dev](https://en.dev). Sponsorships are what let fnox stay independent and the project keep moving. Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

## 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 scoped to the docs banner’s small-screen layout; potential impact is limited to mobile rendering/regressions in banner positioning. > > **Overview** > Improves the docs top banner layout on narrow screens (`<=640px`) by switching it to a stacked column layout, tightening typography/spacing, and enabling `text-wrap: balance` for cleaner line breaks. > > Repositions the close button on mobile by pinning it to the top-right and removing the vertical-centering transform so it no longer overlaps or shifts with multi-line content. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 688bc02. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>

@bglusman

@bglusman

jdx added 2 commits April 24, 2026 09:15

gemini-code-assist Bot reviewed Apr 24, 2026

View reviewed changes

jdx enabled auto-merge (squash) April 24, 2026 14:27

jdx merged commit 5e18e35 into main Apr 24, 2026
18 checks passed

jdx deleted the fix/banner-mobile-layout branch April 24, 2026 14:38

mise-en-dev mentioned this pull request Apr 24, 2026

chore: release v1.22.0 #433

Merged

mise-en-dev mentioned this pull request Apr 26, 2026

chore: release v1.23.0 #445

Merged

BrewTestBot mentioned this pull request Apr 26, 2026

fnox 1.22.0 Homebrew/homebrew-core#279529

Merged

github-actions Bot mentioned this pull request Apr 26, 2026

chore: bump bundled fnox to 1.22.0 fullerzz/fnox-py#10

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

jdx commented Apr 24, 2026 •

edited by cursor Bot

Loading

Uh oh!

greptile-apps Bot commented Apr 24, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Apr 24, 2026

Uh oh!

gemini-code-assist Bot Apr 24, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

jdx commented Apr 24, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

greptile-apps Bot commented Apr 24, 2026

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Flowchart

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

jdx commented Apr 24, 2026 •

edited by cursor Bot

Loading