New note form shows hardware-keyboard hints (↑↓ pick, ↵ create, esc back, Shift+↵) on the phone shells #842

What happens

On a phone, the New note form (the one the note search opens from its Create "…" row, shipped with the 2.54.0 and 2.54.1 core, #826) shows the desktop's key hints: ↑↓ pick, ↵ create and esc back in the footer next to Back and Create, and a Shift+↵ chip inside the Open it button when the name already exists. A phone has no hardware keyboard, so the hints are noise and take room in a footer that already sits right above the soft keyboard.

Seen on the Android shell 1.1.25 (core 2.54.1) on the zennotes emulator (Pixel 7, API 35) on September 22, while checking the form before the Play upload. The iPhone shell 1.12.0 uses the same core and the same phone stylesheet rules, so it is expected to show the same; not looked at there yet.

Why

Both shells hide every other palette footer with one rule in src/ui-mobile/mobile.css (zennotesandroid and zennotesios carry the same text):

.zn-mobile.zn-phone .z-palette [role='dialog'] .justify-end.border-t { display: none; }

The form's footer in packages/app-core/src/components/SearchCreateForm.tsx is justify-between, not justify-end, and it also holds the Back and Create buttons, so that rule does not match, and it must not: hiding the footer would hide the buttons. The hint group (SearchCreateForm.tsx lines 479 to 488) has no marker of its own, and the Shift+↵ chip is inline in the Open it button (line 405). The shells' only hook today is the data-search-create-form marker on the form root, which is how they fixed the header overlap in 2.54.1.

Fix

Smallest version, core side: give the hint group and the inline chip a stable hook, for example data-keyboard-hints="" on the hints <div> and on the <kbd> inside Open it. Then both shells add one rule next to their palette-footer rule:

.zn-mobile.zn-phone .z-palette [data-keyboard-hints] { display: none; }

The footer keeps Back and Create; where they sit once the hints are gone (right-aligned, or stretched across) is the shells' call.

Alternative: the core skips rendering the hints when getHostInfo().kind is ios or android (packages/app-core/src/host.ts). That would also drop them on a tablet with a keyboard, where they are useful, so the CSS hook is the better default: the shells already keep the phone/tablet distinction in their zn-phone class.

Not in scope: the key handling itself. Enter, Escape and the arrows keep working on a tablet with a hardware keyboard.

Ships as: a core change, then both shells adopt the next core and add their rule, the usual ladder.

How to check

Desktop: nothing changes. Open the note search, type a name no note has, open the Create row: the footer still reads ↑↓ pick · ↵ create · esc back.

Phone shells: npm run sync, install on the emulator or simulator, menu button, Search, type a name, tap the Create row. The footer shows only Back and Create. Type the same name again and open the form: the red "already exists" line shows and the button reads just "Open it".