PR Description: Fix Android Label Picker Keyboard Flicker

Fixes: #2260

Summary

This PR fixes an Android-specific issue where creating labels from the page Details panel was unreliable.

When tapping Add label on Android, the label picker opened and the soft keyboard could briefly appear, then immediately disappear. This made it difficult or impossible to type a new label.

The issue was caused by the picker opening from a button while a newly mounted input inside a Mantine Popover tried to autofocus. On Android, the soft keyboard changes viewport geometry, which can disturb floating UI positioning and focus state.

No issue was filed for this bug. This PR is opened directly after reproducing and analyzing the Android keyboard behavior.

Bug / Problem

The Add label flow worked on desktop but was unstable on Android.

Steps to reproduce:

1. Open the app on Android.
2. Open a page.
3. Tap the info/details button.
4. Scroll to the Labels section.
5. Tap Add label.
6. Observe the keyboard flashing open and closed.
7. Try to type a new label.

The label API was not the problem. The failure happened before label creation, while trying to focus the picker input.

Expected Behavior

On Android:

• Tapping Add label should reliably open the label picker.
• The keyboard should not flash open and closed.
• Tapping the picker input should open the keyboard and keep it open.
• Creating a new label should be possible.

On desktop:

• Clicking Add label should still focus the input immediately.

Actual Behavior Before This PR

The picker input used unconditional autofocus after being mounted inside a newly opened popover.

That produced this fragile mobile sequence:

tap Add label
open popover
autofocus newly mounted input
Android opens keyboard
viewport changes
popover/focus state reacts
input loses focus
keyboard closes

Root Cause

The label picker was using desktop-friendly autofocus behavior for all devices.

Android is sensitive to programmatic focus that happens after tapping a separate button, especially when the focused input is mounted inside a floating layer. The soft keyboard can resize the viewport, which affects popover positioning and can cause focus loss.

Relevant references:

• Chrome Android viewport and keyboard behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
• Mantine Popover behavior: https://mantine.dev/core/popover/
• VirtualKeyboard API status: https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API

Changes Made

apps/client/src/features/label/components/labels-section.tsx

• Added a shared input ref for the picker input.
• Added coarse pointer detection with useMediaQuery("(pointer: coarse)").
• Kept explicit input focus for fine pointer devices.
• Skipped forced input focus for touch/coarse pointer devices.
• Disabled trapFocus on touch/coarse pointer devices.
• Set hideDetached={false} so keyboard viewport changes do not hide the popover.
• Preserved the existing controlled popover flow.

apps/client/src/features/label/components/label-picker.tsx

• Added autoFocusInput and inputRef props.
• Replaced unconditional native autoFocus with conditional data-autofocus.
• Used the parent input ref when provided.
• Only refocused the input after selecting a label when autofocus is enabled.

Why This Approach

The reliable mobile path is for the keyboard to open from a direct tap on an input. However, the existing UI is built around a separate Add label button that opens a popover, and the input is mounted inside that popover afterward.

On Android, that button-to-new-input flow is fragile when it also tries to programmatically focus the newly mounted input. The soft keyboard changes viewport geometry, and that can cause focus/popover state to bounce, which is why the keyboard appears briefly and then closes.

This PR keeps the fix intentionally small and targeted:

• It avoids forcing Android to open the keyboard through programmatic focus after tapping a separate button.
• It keeps the existing Add label button and popover structure.
• It preserves the current desktop flow as much as possible.
• It avoids changing backend behavior, label APIs, or label data shape.
• It reduces risk by limiting the change to focus/popover behavior in the existing label picker.

A more complete one-tap mobile solution is possible, but it is a larger UI refactor. That version would make the Add label action become or contain the actual input target, so the user's first tap lands directly on an editable field. That would likely require moving the search input out of the popover dropdown and into the popover target itself, then turning the dropdown into only the suggestion/create list.

That larger refactor has a wider review surface:

• The visual Add label control changes from a button into an input-like control.
• The input state must move up from the dropdown component to the parent label section.
• Keyboard handling, hover state, create-row behavior, and close/reset behavior need to be rewired.
• CSS for the compact label control needs to change.
• Accessibility semantics need to be reconsidered because the trigger becomes a combobox-style input rather than a button.
• Desktop and mobile behavior both need fresh manual testing.

For this PR, I fixed the Android keyboard flicker with the smallest safe change. The larger one-tap input-target redesign is better treated as a follow-up UX improvement rather than bundled into this focused bug fix.

Verification

Ran:

pnpm.cmd --filter ./apps/client run build

Result:

Build completed successfully.

The build emitted existing warnings about pnpm config, deprecated advancedChunks, and large chunks. These warnings are unrelated to this change.

Manual Testing Checklist

• Open a page on Android.
• Open the Details panel.
• Tap Add label.
• Confirm the picker opens and the keyboard does not flash open and closed.
• Tap the picker input.
• Confirm the keyboard opens and stays open.
• Type and create a new label.
• Confirm the label appears on the page.
• Repeat on desktop.
• Confirm desktop still focuses the label input immediately after clicking Add label.

Risk

Risk is low to moderate.

Main tradeoff:

• Touch users may need one extra tap to focus the input after opening the picker.

This tradeoff is intentional because it avoids the unstable Android keyboard flash and keeps the fix minimal.