Skip to content

The shortcut chip is desktop-only - #16

Merged
DelanoJoey merged 1 commit into
mainfrom
fix/shortcut-desktop-only
Sep 20, 2026
Merged

DelanoJoey merged 1 commit into
mainfrom
fix/shortcut-desktop-only

Conversation

@DelanoJoey

Copy link
Copy Markdown
Collaborator

showShortcut had no viewport guard, so the ⌘K / Ctrl K chip rendered at rest on phones — advertising a keyboard shortcut to a device with no keyboard, and charging ~55px of the input's visible width for it.

That width is not cosmetic

An expert-panel round on a consumer site measured the at-rest text budget on a 390px screen at ~169px with the chip present. The site's placeholder rendered as:

Ask how the model w

Clipped mid-word, second clause gone entirely. The chip was ~55px of that shortfall.

isMac compounds it — it reads navigator.platform, so a touch device can render the wrong modifier for a shortcut it cannot press either way.

The fix

Guarded on the same 767px breakpoint the footer-collision check already uses, so the two agree about what "mobile" means.

Held as state set from an effect, not derived inline from matchMedia — the inline form hydrate-mismatches (server sees no window, renders the chip; client hides it). That is exactly why isMac is shaped this way, and the new state follows it. A change listener keeps it correct across rotation.

Tests

test
shown on a wide viewport
hidden below 768px
the freed width reaches the input the property that motivated the change

Mutation: dropping && !isNarrow fails 2 of 3.

Suite 45/45 (3 new) · typecheck clean · version 1.4.1 → 1.4.2.

Publishing is tag-triggered, so merging this does not release it.

🤖 Generated with Claude Code

`showShortcut` had no viewport guard, so the ⌘K / Ctrl-K chip rendered at
rest on phones — advertising a keyboard shortcut to a device with no
keyboard, and charging ~55px of the input's visible width for it.

That width is not cosmetic. An expert-panel round on a consumer measured the
at-rest text budget on a 390px screen at ~169px with the chip present; the
site's placeholder rendered as "Ask how the model w", clipped mid-word with
its second clause gone entirely. The chip was ~55px of that shortfall.

`isMac` compounds it: it reads navigator.platform, so a touch device can
render the wrong modifier for a shortcut it cannot press either way.

Guarded on the same 767px breakpoint the footer-collision check already
uses, as state set from an effect rather than derived inline from
matchMedia — the inline form hydrate-mismatches, which is why isMac is
shaped this way too. The listener keeps it correct across rotation.

Three tests: shown wide, hidden narrow, and the property that motivated it —
the same bar yields a wider field once the chip is gone. Dropping the guard
fails two of them.

Suite 45/45 (3 new) · typecheck clean.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@DelanoJoey
DelanoJoey merged commit 816fd1a into main Sep 20, 2026
1 check passed
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