fix(docs): stack banner message and link on mobile by jdx · Pull Request #9362 · jdx/mise

jdx · 2026-04-24T14:08:41Z

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. Also shrink the font slightly, tighten line-height, add text-wrap: balance for even two-line breaks, and nudge the close button flush to the corner.

Verified in-browser at a 375px viewport (iPhone SE) by swapping the CSS into a live mise.jdx.dev page — message now uses the full content width on two balanced lines, link sits centered on its own line below, and the close button no longer crowds the text.

Test plan

Visit mise.jdx.dev on a mobile device (or DevTools <=640px) after deploy and confirm the banner stacks cleanly.

Note

Low Risk
Low risk: CSS-only changes scoped to the docs banner’s <=640px responsive styling.

Overview
Adjusts docs/.vitepress/theme/banner.css responsive rules so the banner content stacks vertically on <=640px viewports, with tighter spacing and balanced text wrapping to avoid cramped two-line layouts.

Also tweaks mobile typography/padding and moves the close button to the top-right corner (removing the vertical centering transform) to prevent overlap with the message/link.

^{Reviewed by Cursor Bugbot for commit faf9e5c. 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.

greptile-apps · 2026-04-24T14:10:19Z

Greptile Summary

This PR fixes the docs site banner on narrow (≤640px) viewports by switching to flex-direction: column so the message text and "Read more" link stack cleanly, reducing the font size slightly, tightening line-height, adding text-wrap: balance, and pinning the close button to the top-right corner. The change is CSS-only, scoped to the mobile media query, and degrades gracefully on browsers that don't yet support text-wrap: balance.

Confidence Score: 5/5

Safe to merge — CSS-only change limited to a narrow-viewport media query with no logic impact.

All findings are P2 or lower. The change is a small, self-contained CSS fix that matches the described intent and degrades gracefully in older browsers.

No files require special attention.

Important Files Changed

Filename	Overview
docs/.vitepress/theme/banner.css	Adds a mobile media query (≤640px) that stacks the banner content vertically, tightens typography, and repositions the close button to the top-right corner.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Banner renders] --> B{Viewport width?}
    B -- ">640px" --> C[Row layout\nflex-direction: row\ngap: 0.75rem\nfont-size: 0.9rem\nbutton: vertically centered]
    B -- "≤640px" --> D[Column layout\nflex-direction: column\ngap: 0.125rem\nfont-size: 0.8rem\nbutton: top-right corner]
    D --> E[Message text\ncentered, balanced]
    D --> F["Read more" link\ncentered below text]
    D --> G[Close button\ntop: 0.25rem / right: 0.25rem]

_{Reviews (2): 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 .jdx-banner component, transitioning it to a column layout and adjusting typography and spacing. Review feedback suggests increasing the gap between elements to improve visual separation and touch accessibility, as well as increasing the horizontal padding to prevent the banner text from overlapping the close button.

gemini-code-assist · 2026-04-24T14:14:40Z

-    font-size: 0.85rem;
-    padding: 0.4rem 2.5rem;
+    flex-direction: column;
+    gap: 0.125rem;


The gap: 0.125rem (2px) is exceptionally small for a vertical stack. Since the line-height is 1.3, the space between lines of text is actually larger than this gap, which can make the link appear cramped and visually disconnected from the message. Increasing this to 0.5rem would provide better separation and improve touch accessibility on mobile devices.

Suggested change

gap: 0.125rem;

gap: 0.5rem;

gemini-code-assist · 2026-04-24T14:14:40Z

+    flex-direction: column;
+    gap: 0.125rem;
+    font-size: 0.8rem;
+    padding: 0.5rem 2.25rem;


The horizontal padding of 2.25rem may lead to the banner text overlapping the close button. Based on the desktop styles, the button occupies approximately 2.25rem of width. With its mobile position set to right: 0.25rem, it requires 2.5rem of clearance from the right edge to avoid overlap. Increasing the horizontal padding to 2.5rem ensures the text clears the button correctly while maintaining symmetry.

Suggested change

padding: 0.5rem 2.25rem;

padding: 0.5rem 2.5rem;

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.

github-actions · 2026-04-24T14:42:10Z

Hyperfine Performance

`mise x -- echo`

Command	Mean [ms]	Min [ms]	Max [ms]	Relative
`mise-2026.4.20 x -- echo`	23.0 ± 1.2	21.1	34.6	1.00
`mise x -- echo`	24.1 ± 1.0	21.9	30.9	1.05 ± 0.07

`mise env`

Command	Mean [ms]	Min [ms]	Max [ms]	Relative
`mise-2026.4.20 env`	23.6 ± 1.2	20.9	31.7	1.00
`mise env`	23.9 ± 1.2	21.2	31.8	1.01 ± 0.07

`mise hook-env`

Command	Mean [ms]	Min [ms]	Max [ms]	Relative
`mise-2026.4.20 hook-env`	25.1 ± 1.2	22.3	33.0	1.00
`mise hook-env`	25.7 ± 1.4	23.0	35.3	1.02 ± 0.07

`mise ls`

Command	Mean [ms]	Min [ms]	Max [ms]	Relative
`mise-2026.4.20 ls`	23.4 ± 1.3	21.3	32.2	1.01 ± 0.07
`mise ls`	23.3 ± 0.9	21.4	28.8	1.00

`xtasks/test/perf`

Command	mise-2026.4.20	mise	Variance
install (cached)	169ms	174ms	-2%
ls (cached)	82ms	84ms	-2%
bin-paths (cached)	86ms	88ms	-2%
task-ls (cached)	842ms	843ms	+0%

santur198922-sketch · 2026-04-24T14:43:47Z

Шо за НАХ... пт, 24 квіт. 2026 р., 17:42 користувач github-actions[bot] < ***@***.***> пише:

…

*github-actions[bot]* left a comment (jdx/mise#9362) <#9362 (comment)> Hyperfine Performance mise x -- echo Command Mean [ms] Min [ms] Max [ms] Relative mise-2026.4.20 x -- echo 23.0 ± 1.2 21.1 34.6 1.00 mise x -- echo 24.1 ± 1.0 21.9 30.9 1.05 ± 0.07 mise env Command Mean [ms] Min [ms] Max [ms] Relative mise-2026.4.20 env 23.6 ± 1.2 20.9 31.7 1.00 mise env 23.9 ± 1.2 21.2 31.8 1.01 ± 0.07 mise hook-env Command Mean [ms] Min [ms] Max [ms] Relative mise-2026.4.20 hook-env 25.1 ± 1.2 22.3 33.0 1.00 mise hook-env 25.7 ± 1.4 23.0 35.3 1.02 ± 0.07 mise ls Command Mean [ms] Min [ms] Max [ms] Relative mise-2026.4.20 ls 23.4 ± 1.3 21.3 32.2 1.01 ± 0.07 mise ls 23.3 ± 0.9 21.4 28.8 1.00 xtasks/test/perf Command mise-2026.4.20 mise Variance install (cached) 169ms 174ms -2% ls (cached) 82ms 84ms -2% bin-paths (cached) 86ms 88ms -2% task-ls (cached) 842ms 843ms +0% — Reply to this email directly, view it on GitHub <#9362 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B3SYZBXNBIGLMOH6ERQXPE34XN4NZAVCNFSM6AAAAACYFHYV4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DGMJUGAYTOMZRGU> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

@jdx

### 🚀 Features - **(registry)** add --security flag to include security info in JSON output by @jdx in [#9364](#9364) ### 🐛 Bug Fixes - **(config)** limit resolved backend opts to aliases by @risu729 in [#9315](#9315) - **(docs)** stack banner message and link on mobile by @jdx in [#9362](#9362) - **(github)** prefer shortest asset name as tiebreaker in auto-detection by @jdx in [#9361](#9361) - **(java)** newer zulu versions use a different directory structure by @roele in [#9365](#9365) - **(prune)** respect tracked lockfiles by @jdx in [#9373](#9373) - **(task)** skip tool install for missing naked tasks by @jdx in [#9374](#9374) - **(trust)** add untrust command by @jdx in [#9370](#9370) - fix - flux-operator-mcp aqua path by @monotek in [#9357](#9357) ### 📚 Documentation - update ruby compile msg by @fladson in [#9338](#9338) ### 📦️ Dependency Updates - update ubuntu docker tag to v26 by @renovate[bot] in [#9347](#9347) - update ghcr.io/jdx/mise:deb docker digest to 1af5a69 by @renovate[bot] in [#9352](#9352) - update taiki-e/install-action digest to 787505c by @renovate[bot] in [#9354](#9354) - update ghcr.io/jdx/mise:rpm docker digest to 7015ff3 by @renovate[bot] in [#9353](#9353) - update ghcr.io/jdx/mise:copr docker digest to da63a0f by @renovate[bot] in [#9351](#9351) - update ghcr.io/jdx/mise:alpine docker digest to 461700f by @renovate[bot] in [#9350](#9350) - bump communique 1.0.3 → 1.0.4 by @jdx in [#9378](#9378) ### 📦 Registry - remove openshift-install by @jdx in [#9372](#9372) - remove go-sdk by @jdx in [#9371](#9371) ### Chore - **(npm-publish)** use aube publish instead of npm publish by @jdx in [#9328](#9328) ### New Contributors - @fladson made their first contribution in [#9338](#9338)

gemini-code-assist Bot reviewed Apr 24, 2026

View reviewed changes

jdx merged commit 0e6c4f3 into main Apr 24, 2026
37 checks passed

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

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

chore: release 2026.4.21 #9356

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(docs): stack banner message and link on mobile#9362

fix(docs): stack banner message and link on mobile#9362
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 •

edited

Loading

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!

github-actions Bot commented Apr 24, 2026

Uh oh!

Uh oh!

santur198922-sketch commented Apr 24, 2026 via email

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

github-actions Bot commented Apr 24, 2026

Hyperfine Performance

mise x -- echo

mise env

mise hook-env

mise ls

xtasks/test/perf

Uh oh!

Uh oh!

santur198922-sketch commented Apr 24, 2026 via email

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jdx commented Apr 24, 2026 •

edited by cursor Bot

Loading

greptile-apps Bot commented Apr 24, 2026 •

edited

Loading

`mise x -- echo`

`mise env`

`mise hook-env`

`mise ls`

`xtasks/test/perf`