I'm building DeskFlow, a visual desk setup and cable planner. Until now, it was strictly a desktop application.
If you opened it on a mobile browser, it was a disaster. The left equipment panel and the right shopping list panel squeezed the central canvas into oblivion. You couldn't tap, drag, or plan anything.
This weekend, I finally tackled mobile responsiveness in the v1.1.8 update. Here is a breakdown of the UX changes and the technical hurdles I ran into along the way.
The Mobile Redesign
Since you can't cram a 3-panel layout into a 375px wide screen, I set a strict breakpoint at 650px and completely decoupled the mobile layout.
- The Canvas owns the screen: The canvas now takes up 100% of the viewport.
- Equipment Library: Moved to a slide-out drawer accessible via a top-left hamburger menu (☰). Tapping an item drops it instantly onto the center of the canvas.
- Shopping List: Moved to a bottom sheet accessible via a top-right cart icon.
- Touch Gestures: Added 1-finger drag for canvas panning, and 2-finger pinch for zooming. Nodes can be tapped to select and dragged to move.
(Note: The desktop experience remains exactly the same with its original 3-panel layout).
Technical Challenges & Bug Fixes
Making a canvas work on mobile is never just about CSS. The touch events fought me every step of the way.
1. The Pinch-to-Zoom Jumping Bug
When I first implemented the 2-finger pinch-to-zoom, the canvas would violently jump off the screen.
The cause: When two fingers are moving on the screen, the browser fires touchmove events for both touches. My panning logic was trying to calculate the delta and move the canvas based on these touches simultaneously while the zoom logic was also trying to scale the view. They collided.
The fix: I had to explicitly disable the panning calculation the moment e.touches.length > 1 is detected. Pan logic only runs for single touches.
2. The Touch-Absorption Bug
On mobile, users couldn't tap or drag the equipment nodes at all.
The cause: In desktop mode, when "Pan Mode" is active, I place a transparent overlay layer on top of the canvas to catch mouse drags so they don't accidentally select elements underneath. On mobile, this layer was constantly absorbing all touchstart events, making the nodes underneath completely unresponsive.
The fix: I disabled this specific interaction layer on mobile devices, allowing the touch events to safely reach the nodes for tapping and dragging, while handling canvas panning directly on the background container.
Try it out
You can check out the mobile experience right from your phone without any installations. It's super handy if you are at a store and need to quickly check if a specific USB-C hub has the right ports for your layout.
🔗 Live App: https://deskflow.vercel.app
If you've built interactive canvas apps for mobile, I'd love to hear how you handled complex touch events!
Top comments (0)