Skip to content

feat: responsive canvas sizing and mobile touch support#45

Merged
CristianEdwards merged 1 commit intomainfrom
Release
Mar 22, 2026
Merged

feat: responsive canvas sizing and mobile touch support#45
CristianEdwards merged 1 commit intomainfrom
Release

Conversation

@CristianEdwards
Copy link
Copy Markdown
Owner

Changes

  • Responsive layout (<=1100px): Hide sidebar and inspector panels, canvas takes full viewport width with min-height: 50vh
  • Phone breakpoint (<=640px): Reduced padding/gap, smaller border-radius, horizontally scrollable scenario/source/type picker bars
  • touch-action: none: Prevents browser from intercepting canvas touch gestures (pan, pinch-to-page-zoom)
  • Pinch-to-zoom: Tracks multiple active pointers; when two fingers are down, scales camera zoom proportionally to finger distance
  • Pointer cleanup: Properly removes tracked pointers on pointerUp and pointerLeave and resets pinch state

Testing

  • Build passes (tsc -b && vite build)
  • All 18 unit tests pass
  • Desktop layout unchanged at standard resolutions
  • Mobile: canvas is now full-screen with working pinch-to-zoom

- Hide sidebar/inspector on screens <= 1100px, canvas takes full width
- Add 640px breakpoint for phones (reduced padding, scrollable pickers)
- Add touch-action:none on canvas to prevent browser gesture interference
- Add pinch-to-zoom via multi-pointer tracking (two-finger zoom on mobile)
- Clean up pointer tracking on pointerUp and pointerLeave
- Canvas min-height: 50vh on tablet/mobile to prevent collapse
@CristianEdwards CristianEdwards merged commit ea0c152 into main Mar 22, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant