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

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

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.

Matches the identical fix going out to the mise and aube docs.

Test plan

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

Note

Low Risk
Low risk CSS-only change limited to the banner’s @media (max-width: 640px) styling.

Overview
Adjusts docs/.vitepress/theme/banner.css to improve the banner on narrow viewports by switching to flex-direction: column with tighter mobile spacing and typography (gap, font-size, line-height, text-wrap: balance).

Also nudges the close button position (right) on mobile to better align with the updated layout.

^{Reviewed by Cursor Bugbot for commit 2cce073. 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:23Z

Greptile Summary

This PR adds a @media (max-width: 640px) block to banner.css that switches the site-wide announcement banner from a horizontal row to a vertical (flex-direction: column) stack on narrow viewports, along with minor typography tweaks. The change is small and focused; the only discrepancy is that the close button's top: 50% / transform: translateY(-50%) base positioning is not overridden, so it remains vertically centered in the now-taller banner rather than pinned to the top-right corner as the description implies.

Confidence Score: 5/5

Safe to merge — CSS-only change scoped to a narrow-viewport media query with no functional regressions.

All findings are P2 (visual/style, no data loss or breakage). The close button centering is a minor cosmetic discrepancy, not a blocking defect.

No files require special attention.

Important Files Changed

Filename	Overview
docs/.vitepress/theme/banner.css	Adds mobile media query to stack banner content vertically; close button vertical position not updated to match the stated corner-pinning intent.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Viewport width?] -->|"> 640px"| B[Row layout\nflex-direction: row\ngap: 0.75rem\nfont-size: 0.9rem]
    A -->|"≤ 640px"| C[Column layout\nflex-direction: column\ngap: 0.125rem\nfont-size: 0.8rem]
    B --> D[Message + Link side-by-side]
    C --> E[Message stacked above Link]
    D --> F[Close button: right 0.5rem, top 50%]
    E --> G[Close button: right 0.25rem, top 50%\n⚠ still vertically centered]

_{Reviews (1): Last reviewed commit: "fix(docs): stack banner message and link..." | Re-trigger Greptile}

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

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


Close button remains vertically centered, not corner-pinned

The base styles set top: 50% and transform: translateY(-50%) on .jdx-banner button. With flex-direction: column the banner grows taller, so the button ends up mid-height on the right side rather than flush to the top corner as the PR description states. Only right is overridden here; to actually pin the button to the top-right corner you'd also need to override top and transform.

gemini-code-assist

Code Review

This pull request modifies the mobile banner styles in docs/.vitepress/theme/banner.css to use a vertical layout with adjusted typography and spacing. The review feedback suggests increasing the gap and line-height to improve legibility and visual hierarchy on small screens. Additionally, it is recommended to reset the button's vertical alignment properties to ensure it is correctly positioned in the corner as intended.

gemini-code-assist · 2026-04-24T14:10:56Z

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


The gap: 0.125rem (2px) is very small for vertical stacking. It results in the link being closer to the message than the lines of the message are to each other (given the line-height). Increasing this to 0.25rem would provide better visual separation between the message and the call-to-action link.

Suggested change

gap: 0.125rem;

gap: 0.25rem;

gemini-code-assist · 2026-04-24T14:10:56Z

+    gap: 0.125rem;
+    font-size: 0.8rem;
+    padding: 0.5rem 2.25rem;
+    line-height: 1.3;


Reducing the line-height to 1.3 while also decreasing the font-size can make the text harder to read on mobile devices. Maintaining the base 1.4 is generally better for accessibility and legibility on small screens.

Suggested change

line-height: 1.3;

line-height: 1.4;

gemini-code-assist · 2026-04-24T14:10:56Z

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


The PR description mentions moving the button "flush to the corner," but it currently remains vertically centered due to the inherited top: 50% and transform: translateY(-50%) from the base styles. On a stacked mobile banner, a centered button can look out of place. If a corner placement is intended, you should also reset the top and transform properties.

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

## Summary Follow-up to #865. With `flex-direction: column` the mobile banner is now taller, and the base rule's `top: 50%; transform: translateY(-50%)` centering floats the × button in the vertical middle of the stacked content instead of in the top-right corner. Override `top` and `transform` inside the `<=640px` media query so the button pins flush to the corner. ## Test plan - [ ] Open hk.jdx.dev at a <=640px viewport, clear `localStorage['jdx-banner-dismissed']`, confirm the × button sits in the top-right corner rather than floating in the middle.  --- > [!NOTE] > **Low Risk** > Low risk CSS-only change scoped to the mobile banner close button positioning with no functional or data-impacting logic changes. > > **Overview** > Adjusts `docs/.vitepress/theme/banner.css` so that on `<=640px` viewports the banner close button no longer uses `top: 50%` + `translateY(-50%)` centering. > > Within the mobile media query, it explicitly sets `top: 0.25rem` and removes the transform to keep the × button pinned to the top-right corner when the banner stacks vertically. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit fbf8067. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>

@jdx

### 🐛 Bug Fixes - **(builtins)** silence pklr deprecation warnings on Builtins.pkl load by [@jdx](https://github.com/jdx) in [#880](#880) - **(ci)** serialize docs lint step by [@jdx](https://github.com/jdx) in [#874](#874) - **(config)** include main pkl path in cache fresh files by [@jdx](https://github.com/jdx) in [#879](#879) - **(docs)** stack banner message and link on mobile by [@jdx](https://github.com/jdx) in [#865](#865) - **(docs)** pin banner close button to top-right corner on mobile by [@jdx](https://github.com/jdx) in [#867](#867) ### 📚 Documentation - **(site)** show release version and github stars by [@jdx](https://github.com/jdx) in [#872](#872) ### 🔍 Other Changes - add pr-closer workflow by [@jdx](https://github.com/jdx) in [#876](#876) ### 📦️ Dependency Updates - bump communique 1.0.3 → 1.0.4 by [@jdx](https://github.com/jdx) in [#868](#868) - update anthropics/claude-code-action digest to 2da6cfa by [@renovate[bot]](https://github.com/renovate[bot]) in [#869](#869) - update anthropics/claude-code-action digest to 567fe95 by [@renovate[bot]](https://github.com/renovate[bot]) in [#870](#870) - bump communique to 1.1.2 by [@jdx](https://github.com/jdx) in [#875](#875)  --- > [!NOTE] > <sup>[Cursor Bugbot](https://cursor.com/bugbot) is generating a summary for commit 62ff432. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>  Co-authored-by: mise-en-dev <123107610+mise-en-dev@users.noreply.github.com>

This MR contains the following updates: | Package | Update | Change | |---|---|---| | [hk](https://github.com/jdx/hk) | minor | `1.43.0` → `1.45.0` | MR created with the help of [el-capitano/tools/renovate-bot](https://gitlab.com/el-capitano/tools/renovate-bot). **Proposed changes to behavior should be submitted there as MRs.** --- ### Release Notes <details> <summary>jdx/hk (hk)</summary> ### [`v1.45.0`](https://github.com/jdx/hk/blob/HEAD/CHANGELOG.md#1450---2026-05-04) [Compare Source](jdx/hk@v1.44.3...v1.45.0) ##### 🚀 Features - **(builtins)** add `buildifier` format and lint built-ins by [@plx](https://github.com/plx) in [#896](jdx/hk#896) ##### 🐛 Bug Fixes - **(step)** only auto-batch when rendered command exceeds ARG\_MAX by [@jdx](https://github.com/jdx) in [#901](jdx/hk#901) ##### 📚 Documentation - thank Namespace for GitHub Actions runner support by [@jdx](https://github.com/jdx) in [#895](jdx/hk#895) ##### 🔍 Other Changes - **(ci)** use !cancelled() instead of always() for final job by [@jdx](https://github.com/jdx) in [#906](jdx/hk#906) - **(docs)** remove shrill.en.dev analytics script by [@jdx](https://github.com/jdx) in [#903](jdx/hk#903) - remove rust-cache from release jobs by [@jdx](https://github.com/jdx) in [#893](jdx/hk#893) - invert CLAUDE.md/AGENTS.md so AGENTS.md is canonical by [@jdx](https://github.com/jdx) in [#905](jdx/hk#905) - set dev profile debug to 1 by [@jdx](https://github.com/jdx) in [#907](jdx/hk#907) ##### 📦️ Dependency Updates - update anthropics/claude-code-action digest to [`fefa07e`](jdx/hk@fefa07e) by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#897](jdx/hk#897) - update jdx/mise-action digest to [`1648a78`](jdx/hk@1648a78) by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#898](jdx/hk#898) - update apple-actions/import-codesign-certs action to v7 by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#900](jdx/hk#900) - update autofix-ci/action action to v1.3.4 by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#899](jdx/hk#899) - lock file maintenance by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#908](jdx/hk#908) ##### New Contributors - [@plx](https://github.com/plx) made their first contribution in [#896](jdx/hk#896) ### [`v1.44.3`](https://github.com/jdx/hk/blob/HEAD/CHANGELOG.md#1443---2026-04-30) [Compare Source](jdx/hk@v1.44.2...v1.44.3) ##### 🐛 Bug Fixes - **(hook)** do not stage fixes when fail\_on\_fix=true by [@jdx](https://github.com/jdx) in [#892](jdx/hk#892) - use site domain for plausible data-domain by [@jdx](https://github.com/jdx) in [#886](jdx/hk#886) - make text-mode progress output usable in CI by [@jdx](https://github.com/jdx) in [#890](jdx/hk#890) ##### 📚 Documentation - prefix GitHub star count with ★ glyph by [@jdx](https://github.com/jdx) in [#883](jdx/hk#883) ##### 🔍 Other Changes - **(release)** dedupe sponsor section in release notes by [@jdx](https://github.com/jdx) in [#881](jdx/hk#881) - switch analytics from gtm/goatcounter to plausible by [@jdx](https://github.com/jdx) in [#885](jdx/hk#885) - migrate to namespace.so runners by [@jdx](https://github.com/jdx) in [#891](jdx/hk#891) ### [`v1.44.2`](https://github.com/jdx/hk/blob/HEAD/CHANGELOG.md#1442---2026-04-26) [Compare Source](jdx/hk@v1.44.1...v1.44.2) ##### 🐛 Bug Fixes - **(builtins)** silence pklr deprecation warnings on Builtins.pkl load by [@jdx](https://github.com/jdx) in [#880](jdx/hk#880) - **(ci)** serialize docs lint step by [@jdx](https://github.com/jdx) in [#874](jdx/hk#874) - **(config)** include main pkl path in cache fresh files by [@jdx](https://github.com/jdx) in [#879](jdx/hk#879) - **(docs)** stack banner message and link on mobile by [@jdx](https://github.com/jdx) in [#865](jdx/hk#865) - **(docs)** pin banner close button to top-right corner on mobile by [@jdx](https://github.com/jdx) in [#867](jdx/hk#867) ##### 📚 Documentation - **(site)** show release version and github stars by [@jdx](https://github.com/jdx) in [#872](jdx/hk#872) ##### 🔍 Other Changes - add pr-closer workflow by [@jdx](https://github.com/jdx) in [#876](jdx/hk#876) ##### 📦️ Dependency Updates - bump communique 1.0.3 → 1.0.4 by [@jdx](https://github.com/jdx) in [#868](jdx/hk#868) - update anthropics/claude-code-action digest to [`2da6cfa`](jdx/hk@2da6cfa) by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#869](jdx/hk#869) - update anthropics/claude-code-action digest to [`567fe95`](jdx/hk@567fe95) by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#870](jdx/hk#870) - bump communique to 1.1.2 by [@jdx](https://github.com/jdx) in [#875](jdx/hk#875) ### [`v1.44.1`](https://github.com/jdx/hk/blob/HEAD/CHANGELOG.md#1441---2026-04-24) [Compare Source](jdx/hk@v1.44.0...v1.44.1) ##### 🐛 Bug Fixes - **(git)** skip untracked scan when HK\_STASH\_UNTRACKED=false by [@jdx](https://github.com/jdx) in [#861](jdx/hk#861) - **(run)** add post-commit and pre-rebase subcommands by [@jdx](https://github.com/jdx) in [#858](jdx/hk#858) ##### 📚 Documentation - **(install)** recommend global hooks as primary setup path by [@jdx](https://github.com/jdx) in [#855](jdx/hk#855) - add cross-site announcement banner by [@jdx](https://github.com/jdx) in [#857](jdx/hk#857) - respect banner expires field by [@jdx](https://github.com/jdx) in [#862](jdx/hk#862) ##### 🔍 Other Changes - vendor bats test helpers instead of git submodules by [@jdx](https://github.com/jdx) in [#859](jdx/hk#859) ##### 📦️ Dependency Updates - bump communique to 1.0.3 by [@jdx](https://github.com/jdx) in [#863](jdx/hk#863) - update anthropics/claude-code-action digest to [`e58dfa5`](jdx/hk@e58dfa5) by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#864](jdx/hk#864) ### [`v1.44.0`](https://github.com/jdx/hk/blob/HEAD/CHANGELOG.md#1440---2026-04-23) [Compare Source](jdx/hk@v1.43.0...v1.44.0) ##### 🚀 Features - **(check)** implement --plan, --why, and --json by [@jdx](https://github.com/jdx) in [#848](jdx/hk#848) - **(cocogitto)** add cocogitto conventional commits config to hk builtin config by [@hituzi-no-sippo](https://github.com/hituzi-no-sippo) in [#838](jdx/hk#838) - **(git)** support GIT\_DIR/GIT\_WORK\_TREE for bare-repo dotfile managers by [@jdx](https://github.com/jdx) in [#847](jdx/hk#847) - **(install)** use Git 2.54 config-based hooks with --global support by [@jdx](https://github.com/jdx) in [#853](jdx/hk#853) ##### 🐛 Bug Fixes - use text progress in CI by [@jdx](https://github.com/jdx) in [#845](jdx/hk#845) ##### 📚 Documentation - generalize agent guidelines by [@jdx](https://github.com/jdx) in [#846](jdx/hk#846) - add releases nav and aube lock by [@jdx](https://github.com/jdx) in [#849](jdx/hk#849) ##### 🔍 Other Changes - **(release)** append en.dev sponsor blurb to release notes by [@jdx](https://github.com/jdx) in [#854](jdx/hk#854) - bump communique to 1.0.1 by [@jdx](https://github.com/jdx) in [#850](jdx/hk#850) ##### 📦️ Dependency Updates - update actions-rust-lang/setup-rust-toolchain digest to [`2b1f5e9`](jdx/hk@2b1f5e9) by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#832](jdx/hk#832) - update anthropics/claude-code-action digest to [`c3d45e8`](jdx/hk@c3d45e8) by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#833](jdx/hk#833) - update rust crate tokio to v1.52.1 by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#834](jdx/hk#834) - update actions/upload-pages-artifact action to v5 by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#835](jdx/hk#835) - update taiki-e/upload-rust-binary-action digest to [`f0d45ae`](jdx/hk@f0d45ae) by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#839](jdx/hk#839) - update rust crate clx to v2 by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#836](jdx/hk#836) - update anthropics/claude-code-action digest to [`0d2971c`](jdx/hk@0d2971c) by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#841](jdx/hk#841) - update anthropics/claude-code-action digest to [`38ec876`](jdx/hk@38ec876) by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#842](jdx/hk#842) - lock file maintenance by [@renovate\[bot\]](https://github.com/renovate\[bot]) in [#851](jdx/hk#851) </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - At any time (no schedule defined) - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever MR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this MR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this MR, check this box --- This MR has been generated by [Mend Renovate](https://github.com/renovatebot/renovate).

greptile-apps Bot reviewed Apr 24, 2026

View reviewed changes

gemini-code-assist Bot reviewed Apr 24, 2026

View reviewed changes

jdx merged commit 12e790b into main Apr 24, 2026
26 checks passed

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

This was referenced Apr 24, 2026

chore: release v1.44.2 #866

Merged

fix(docs): pin banner close button to top-right corner on mobile #867

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#865

fix(docs): stack banner message and link on mobile#865
jdx merged 1 commit 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!

greptile-apps Bot 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!

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!

greptile-apps Bot Apr 24, 2026

Choose a reason for hiding this comment

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!

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