canvas-website/backlog/tasks/task-047 - Improve-mobile-t...

50 lines
1.6 KiB
Markdown

---
id: task-047
title: Improve mobile touch/pen interactions across custom tools
status: Done
assignee: []
created_date: '2025-12-10 18:28'
updated_date: '2025-12-10 18:28'
labels:
- mobile
- touch
- ux
- accessibility
dependencies: []
priority: medium
---
## Description
<!-- SECTION:DESCRIPTION:BEGIN -->
Fixed touch and pen interaction issues across all custom canvas tools to ensure they work properly on mobile devices and with stylus input.
Changes made:
- Added onTouchStart/onTouchEnd handlers to all interactive elements
- Added touchAction: 'manipulation' CSS to prevent 300ms click delay
- Increased minimum touch target sizes to 44px for accessibility
- Fixed ImageGen: Generate button, Copy/Download/Delete, input field
- Fixed VideoGen: Upload, URL input, prompt, duration, Generate button
- Fixed Transcription: Start/Stop/Pause buttons, textarea, Save/Cancel
- Fixed Multmux: Create Session, Refresh, session list, input fields
<!-- SECTION:DESCRIPTION:END -->
## Acceptance Criteria
<!-- AC:BEGIN -->
- [x] #1 All buttons respond to touch on mobile devices
- [x] #2 No 300ms click delay on interactive elements
- [x] #3 Touch targets are at least 44px for accessibility
- [x] #4 Image generation works on mobile
- [x] #5 Video generation works on mobile
- [x] #6 Transcription controls work on mobile
- [x] #7 Terminal (Multmux) controls work on mobile
<!-- AC:END -->
## Implementation Notes
<!-- SECTION:NOTES:BEGIN -->
Pushed to dev branch: b6af3ec
Files modified: ImageGenShapeUtil.tsx, VideoGenShapeUtil.tsx, TranscriptionShapeUtil.tsx, MultmuxShapeUtil.tsx
<!-- SECTION:NOTES:END -->