Skip to content

fix(mobile): enlarge session filter and clear-search tap targets - #6361

Open
iscekic wants to merge 1 commit into
mainfrom
kwf/explorer-a-control-is-too-small-to-tap-reliably-aab15aeb-c813
Open

iscekic wants to merge 1 commit into
mainfrom
kwf/explorer-a-control-is-too-small-to-tap-reliably-aab15aeb-c813

Conversation

@iscekic

@iscekic iscekic commented Sep 19, 2026

Copy link
Copy Markdown
Collaborator

Changelog for users

  • The session filter button on Agents and session history now has a 44-point tap target.
  • The search field's Clear button now has a 44-point tap target.
  • The filter count badge stays inside the button's top-right corner.
  • The search field keeps the same layout with or without a query.

Changelog for maintainers

  • Both controls set an explicit h-[44px] w-[44px] size and drop hitSlop, so touch size no longer depends on platform slop behavior.
  • The clear button reserves a non-interactive 44×44 spacer when the query is empty, so the row never reflows.
  • Search field padding changed from px-4 py-1.5 to pl-4 pr-1; the field height now comes from its 44-point children.
  • The filter count badge moved from -right-1.5 -top-1.5 to right-[6px] top-[6px], inside the button bounds; review that it stays legible.
  • New mounted test compiles the Tailwind classes to 44×44 and asserts no hitSlop, badge pointerEvents, and the empty-query spacer.
  • apps/mobile/src/components/agents/session-list-controls.mounted.test.tsx:7: the compiler import is type-only test support, so both controls keep one shared 44×44 implementation for iOS and Android.
  • Review the filter badge offset and the search field padding first; both change the visual composition.
  • Review hint: the added session-history and rotated captures complete the e1/e2 device proof and replace the earlier captions that named those captures without showing them.

E2E proof

e1-filter-applied

e1-agents-land-dark

e2-agents-main-nomatch-portrait

e2-agents-nomatch-portrait-dark

e1-history-filter-applied

e2-agents-nomatch-land-dark

e1-history-land-dark

Owner request

Explorer finding: a control is too small to tap reliably

The user-agent explorer found this while using the app like a user.
One finding per item; the explorer never edits product code.

Flow: accessibility
Found on revision: 59ef790

Repro:

  1. set this state first: account e2e-mobile-cloud-android@example.com signed in, $25 credits, a second organization, 4 Code Reviewer pull requests, one top-level session permission (ses_...), system night mode, device landscape.; the device in dark mode
  2. open the app on emulator-5554
  3. reach the screen the capture names (the screen the capture names)
  4. the capture shows the defect named below

Observed: controls below 28dp on a side: agents-list-landscape: 1 small control(s): Filter sessions (52x52px) agents-search-empty: 2 small control(s): Filter sessions (52x52px); Clear search (42x42px)
Expected: every control is at least 28dp on a side

Evidence (from the device run):

E2E proof — log excerpts

[e1] Filter sessions 44dp + edge tap, badge visible/tappable on Agents and sessi -> pass :: android emulator-5554, landscape + app Dark; e1-touch-targets.log has displayDensity 420 and content-desc="Filter sessions, 1" ... bounds="[907,165][1022,281]" (Agents, 115x116px) and bounds="[928,149][1043,265]" (history, 115x116px) = exactly 44dp at 2.625px/dp; an edge tap at (912,172) and (933,155) reopened the sheet with content-desc="CLI" checkable="true" checked="true" / content-desc="Cloud" ... checked="true", and the session-filter-badge node sits inside the button; captures e1-agents-land-dark.png, e1-filter-applied.png, e1-history-land-dark.png, e1-history-filter-applied.png.
[e2] Clear search 44dp + edge tap, no search-field resize or content shift, afte -> pass :: android emulator-5554; e2-search-clear.log shows the search field bounds unchanged at bounds="[163,329][878,438]" (Agents portrait) and bounds="[163,306][878,415]" (history landscape+portrait) before typing, with zzqnothing typed (text="No sessions match") and after edge-tapping Clear search at (900,333)/(900,310), whose node is bounds="[895,327][1010,442]" (115x115px=44dp); captures e2-agents-main-nomatch-portrait.png, e2-agents-nomatch-land-dark.png, e2-agents-nomatch-portrait-dark.png.

Explorer finding: a control is too small to tap reliably

The user-agent explorer found this while using the app like a user.
One finding per item; the explorer never edits product code.

Flow: accessibility
Found on revision: 59ef790

Repro:
1. set this state first: account e2e-mobile-cloud-android@example.com signed in, $25 credits, a second organization, 4 Code Reviewer pull requests, one top-level session `permission` (ses_...), system night mode, device landscape.; the device in dark mode
2. open the app on emulator-5554
3. reach the screen the capture names (the screen the capture names)
4. the capture shows the defect named below

Observed: controls below 28dp on a side: agents-list-landscape: 1 small control(s): Filter sessions (52x52px) agents-search-empty: 2 small control(s): Filter sessions (52x52px); Clear search (42x42px)
Expected: every control is at least 28dp on a side

Evidence (from the device run):
- ~/.local/share/kwf/findings/explorer-a-control-is-too-small-to-tap-reliably-aab15aeb/agents-list-landscape.png
- ~/.local/share/kwf/findings/explorer-a-control-is-too-small-to-tap-reliably-aab15aeb/agents-search-empty.png
- ~/.local/share/kwf/findings/explorer-a-control-is-too-small-to-tap-reliably-aab15aeb/preferences-account.png
- ~/.local/share/kwf/findings/explorer-a-control-is-too-small-to-tap-reliably-aab15aeb/preferences-bottom.png
@kilo-code-bot

kilo-code-bot Bot commented Sep 19, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

Reviewed the 44-point touch-target changes to the mobile session filter button, submit-search header, and the new mounted contract test; the fixed-size controls, empty-query spacer, and badge repositioning are internally consistent and do not introduce runtime, layout-reflow, or leak risks.

Files Reviewed (3 files)
  • apps/mobile/src/components/agents/session-filter-button.tsx
  • apps/mobile/src/components/agents/session-list-search-header.tsx
  • apps/mobile/src/components/agents/session-list-controls.mounted.test.tsx

Reviewed by deepseek-v4.1-flash · Input: 0 · Output: 0 · Cached: 0

Review guidance: REVIEW.md from base branch main

@iscekic
iscekic marked this pull request as draft September 19, 2026 11:26
@iscekic

iscekic commented Sep 19, 2026

Copy link
Copy Markdown
Collaborator Author

bot: Rejected, no code change (kwf kwf-fix-platform-6a78).

Why: (already implemented, verified live: no change needed: The cited compiler import is test-only type information, and both controls already use one shared 44×44 implementation for iOS and Android. Evidence refutes the alleged fork: apps/mobile/src/components/agents/session-list-controls.mounted.test.tsx:7 imports only types; :31 loads th

@iscekic
iscekic marked this pull request as ready for review September 19, 2026 11:47
@iscekic iscekic added the human-ready The PR is ready for human review. label Sep 19, 2026
@iscekic iscekic self-assigned this Sep 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

human-ready The PR is ready for human review.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant