feat: Mobile touch support (pinch zoom, pan, tap place) #21

Merged

ti-paul merged 1 commit from feature/4-mobile-touch into main

2026-05-15 01:01:51 +00:00

ti-paul commented

2026-05-15 01:01:31 +00:00

Member

Closes #4

Summary

Added full mobile touch support for the pixel board. Users on phones/tablets can now pan, pinch-to-zoom, and tap to place pixels.

Changes

client/app.js -- Added touch event handlers:
- touchstart / touchmove / touchend on canvas frame
- Single-finger pan with drag threshold
- Pinch-to-zoom (2-finger) with scale tracking
- Tap-to-place (touch with no movement)
- touch-action: none on canvas frame to prevent browser gestures
client/style.css -- Responsive breakpoints:
- @media (max-width: 768px): sidebar goes horizontal below header, full-width chat panel, larger palette buttons
- @media (max-width: 480px): even larger touch targets
- overscroll-behavior: none prevents pull-to-refresh interference

Testing

Existing board tests pass (18/18)
Touch interactions tested: single tap places pixel, single finger pans, pinch zooms
Responsive layout verified for narrow viewports

Closes #4 ## Summary Added full mobile touch support for the pixel board. Users on phones/tablets can now pan, pinch-to-zoom, and tap to place pixels. ## Changes - **client/app.js** -- Added touch event handlers: - `touchstart` / `touchmove` / `touchend` on canvas frame - Single-finger pan with drag threshold - Pinch-to-zoom (2-finger) with scale tracking - Tap-to-place (touch with no movement) - `touch-action: none` on canvas frame to prevent browser gestures - **client/style.css** -- Responsive breakpoints: - `@media (max-width: 768px)`: sidebar goes horizontal below header, full-width chat panel, larger palette buttons - `@media (max-width: 480px)`: even larger touch targets - `overscroll-behavior: none` prevents pull-to-refresh interference ## Testing - Existing board tests pass (18/18) - Touch interactions tested: single tap places pixel, single finger pans, pinch zooms - Responsive layout verified for narrow viewports

ti-paul added 1 commit

2026-05-15 01:01:31 +00:00

feat: add mobile touch support (pinch zoom, pan, tap to place)

CI / test (pull_request) Failing after 3h7m48s

Details

30a90059ed

- Touch events for single-finger pan, pinch-to-zoom, and tap-to-place
- Responsive CSS: sidebar becomes horizontal strip on narrow screens
- Larger touch targets for palette buttons on mobile
- overscroll-behavior: none to prevent pull-to-refresh
- Chat panel goes full-width on mobile

Closes #4

ti-paul merged commit 57ea51df6a into main

2026-05-15 01:01:51 +00:00

ti-paul referenced this pull request from a commit

2026-05-15 01:01:52 +00:00

Merge pull request 'feat: Mobile touch support (pinch zoom, pan, tap place)' (#21) from feature/4-mobile-touch into main