fix: mobile UX for adding bookmarks (audit + top 3 fixes)#45
Merged
Conversation
UX audit scoped to the add-bookmark flow on mobile (390px, touch emulation), written up in docs/ux-audit-mobile-add-bookmark.md. Top 3 findings fixed: 1. URL entry fought the mobile keyboard: the field was a bare type="text" input, so phones autocapitalized/autocorrected URLs, showed the generic keyboard, and iOS didn't open the keyboard at all because focus ran in an async effect. The input now sets inputMode="url", autoCapitalize="none", autoCorrect="off", spellCheck=false, enterKeyHint="go", focuses via autoFocus (synchronous with the tap), and gets a taller touch target on mobile. The tag input gets the same autocapitalize/autocorrect treatment since tags are lowercased anyway. 2. The copied-URL fast path didn't exist on touch: paste-to-bookmark relies on document-level paste events that mobile browsers never fire. The draft card now shows a one-tap Paste button (async Clipboard API) that validates, normalizes, fills the URL, and moves focus to the title, with inline errors for empty/non-URL/ denied clipboard. Hidden when the API is unavailable. Desktop gets the same button. 3. Touch targets and keyboard-only affordances: Save/Cancel were 51x16/61x16px and now measure 44px tall on mobile; the Read later checkbox grew to 16px with a taller label hit area; the "Enter to save · Esc to cancel" and "Press ↓ to see existing tags" hints are hidden below sm. All mobile sizing is breakpoint-gated (sm:), so desktop renders exactly as before apart from the new Paste button. Verified with Playwright at 390x844 and 1440x900 by measuring rendered rects before/after. Adds component tests for the draft card. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TizfppGYnmxgZko85Ug7nR
✅ Deploy Preview for hypermarkk ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
UX audit scoped to the add-bookmark flow on mobile (390px, touch
emulation), written up in docs/ux-audit-mobile-add-bookmark.md.
Top 3 findings fixed:
URL entry fought the mobile keyboard: the field was a bare
type="text" input, so phones autocapitalized/autocorrected URLs,
showed the generic keyboard, and iOS didn't open the keyboard at
all because focus ran in an async effect. The input now sets
inputMode="url", autoCapitalize="none", autoCorrect="off",
spellCheck=false, enterKeyHint="go", focuses via autoFocus
(synchronous with the tap), and gets a taller touch target on
mobile. The tag input gets the same autocapitalize/autocorrect
treatment since tags are lowercased anyway.
The copied-URL fast path didn't exist on touch: paste-to-bookmark
relies on document-level paste events that mobile browsers never
fire. The draft card now shows a one-tap Paste button (async
Clipboard API) that validates, normalizes, fills the URL, and
moves focus to the title, with inline errors for empty/non-URL/
denied clipboard. Hidden when the API is unavailable. Desktop
gets the same button.
Touch targets and keyboard-only affordances: Save/Cancel were
51x16/61x16px and now measure 44px tall on mobile; the Read later
checkbox grew to 16px with a taller label hit area; the
"Enter to save · Esc to cancel" and "Press ↓ to see existing
tags" hints are hidden below sm.
All mobile sizing is breakpoint-gated (sm:), so desktop renders
exactly as before apart from the new Paste button. Verified with
Playwright at 390x844 and 1440x900 by measuring rendered rects
before/after. Adds component tests for the draft card.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01TizfppGYnmxgZko85Ug7nR