Fix iOS touch targets and the two-tap send in the composer - #1673
Open
sberan wants to merge 4 commits into
Open
Conversation
Found while using bb from an installed iOS PWA on a phone. **Send needs two taps.** handleSubmitPointerDown skipped preventDefault unless the TipTap editor reported isFocused. On iOS that reads false at pointerdown while the keyboard is still up, because WebKit has already begun moving focus by the time the handler runs — which is exactly the case the guard exists to protect. The keyboard dismisses, the composer reflows upward, and the click lands where the button used to be, so the first tap appears to do nothing. Cancelling the default is safe regardless of focus state: it suppresses the focus transfer for that press and the click still fires. Covered by a regression test that fails without the change. **Touch targets below the 44px minimum.** The composer's submit/stop/voice slot is 32px (size-8) and the inline editor's cancel — the only exit from edit mode — is 24px (size-6). Both now grow on coarse pointers only, so desktop density is unchanged. **Queued-message actions are unreachable on touch.** Send-now / Edit / Delete are rendered but gated behind `md:flex` and revealed on hover, so below that breakpoint a phone only ever gets the 28px overflow menu. They now show outright on coarse pointers, and the overflow trigger hides there since the two are anchored to the same edge and would otherwise stack. Uses the existing max-md:pointer-coarse: idiom throughout.
The expanded background activity list truncates each description to one line and exposes the full text only through a title attribute. Hover does not exist on touch, so on a phone there is no way to find out which command is running — the row reads "Running background command: ..." and expanding it gives another truncated line. Wrap to at most two lines on coarse pointers. The collapsed summary row above is still a one-line summary, so this only affects the list you deliberately expand.
The previous commit only wrapped the expanded list. The line most people actually read is the collapsed summary — the one that renders as "Running background command: ..." without expanding anything — and it truncates too, with the same hover-only title attribute behind it. Expanding was no help either, so on a phone there was no path to the text at all. Wrap the summary to two lines on coarse pointers as well.
Author
|
Added a follow-up: the first background-activity commit only wrapped the expanded list, but the line most people actually read is the collapsed summary — the one rendering as |
…the width "Running background command:" is ~27 characters and consumes the entire first line on a phone, so the description wrapped onto a second line before it had any room — the card read as a header with the useful text beneath it. The icon already identifies the task kind, and the row's aria-label still carries the full "<label>: <description>", so nothing is lost for screen readers. Hide the visible prefix on coarse pointers only.
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
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.
Found while using bb daily from an installed iOS PWA on a phone. Three problems in the composer, all touch-only — nothing here changes desktop behaviour.
1. Send needs two taps
handleSubmitPointerDownskippedpreventDefault()unless the TipTap editor reportedisFocused:On iOS that check reads
falseatpointerdownwhile the keyboard is still up, because WebKit has already begun moving focus by the time the handler runs. That is precisely the case the guard exists to protect against, so it opts out exactly when it is needed: focus leaves the editor, the keyboard dismisses, the composer reflows upward, and the click lands where the button used to be. The first tap appears to do nothing and the message only sends on a second press.Cancelling the default is safe regardless of focus state — it suppresses the focus transfer for that press only, and the
clickstill fires, which is what owns the commit.Added a regression test. It fails on
mainwithexpected true to be false(the default is not cancelled) and passes with the fix.2. Touch targets under 44px
size-8). It is the most-tapped control in the app.size-6), and it is the only exit from edit mode.Both grow on coarse pointers only.
3. Queued-message actions are unreachable on touch
Send-now / Edit / Delete are rendered, but the container is
hidden … md:flexand only revealed ongroup-hover. On a phone neither condition is ever true, so the row falls back to the 28px overflow menu as the only affordance.They now show outright on coarse pointers. The overflow trigger hides there in the same breath — both are absolutely positioned against the same right edge, so showing both stacks the two sets on top of each other at different offsets.
Notes
max-md:pointer-coarse:idiom already used inProjectListandThreadRow, so the scoping matches the codebase. Worth noting that a barepointer-coarse:would also cover tablets atmdand above, where 44px is equally right — happy to widen it if you would prefer that.pnpm exec vitest run apps/app/src/components/promptbox→ 329 passed, 30 files.pnpm exec tsc --noEmit -p apps/app/tsconfig.json→ clean.