Skip to content

fix(css): raise the remaining 44 px controls to the 48 px touch-target minimum #235

Description

@dborup

Relates to #189, #229

Problem

The house rule from Kpa-clawbot#2052 sets a 48 px minimum touch target, and #229 raised .fav-star to 48 px. public/style.css still sizes several controls at 44 px. None of them are in test-touch-targets.js or in the Kpa-clawbot#2052 tests:

  • .theme-toggle
  • .modal-close / .ch-modal-close (inside a media block)
  • .ch-back-btn
  • .ch-avatar.ch-tappable
  • .suggest-claim
  • .detail-back-btn / .filter-toggle-btn (inside a media block)

test-issue-2052-touch-target-e2e.js itself notes that other controls "are outside Kpa-clawbot#2052 and still 44". This list comes from the #229 review.

Proposed fix

  • Raise each control to at least 48×48 px, using the existing CSS variables or tokens. No hardcoded colours.
  • Check the layout at 390 px and on desktop wherever each control appears, with no horizontal page overflow. The channel header, the modals, the nodes detail and the suggest dialog are the likely tight spots.
  • Add each control to test-touch-targets.js, or to the style.css declares .nav-btn and .ch-icon-btn at both 48px and 44px Kpa-clawbot/CoreScope#2052 E2E, so that a regression to 44 px fails.

Acceptance

  • Every listed control measures at least 48×48 px in the E2E at mobile width.
  • No horizontal overflow at 390 px. Screenshots of the tight spots are attached to the PR.
  • A mutant that sets one control back to 44 px fails a test.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions