- InteractionEngine: pointerdown on canvas, pointermove/pointerup on document
- Pointer capture for smooth dragging outside canvas
- CSS: touch-action: none on canvas to prevent browser touch interception
- Fixes: tools not working on desktop (mouseup lost outside canvas) and mobile (no touch support)
- RightSidebar: added onCollapse prop and close button in header
- LeftSidebar: wired existing onCollapse prop in App.tsx
- CSS: show .leftbar-toggle and .rightbar-close on mobile
- Both buttons call setMobile{Left,Right}Open(false) to close overlays
- MobileDrawers component rendered empty drawer-left/drawer-right overlays
- These had drawer-body with 0 children, covering the real leftbar/rightbar
- Real sidebars with actual content now visible as slide-in overlays
- overflow-y: auto on mobile sidebars so all tools are reachable
- Re-enable tool-section-label, tool-btn-label, leftbar-title on mobile
- Tool grid 2-column with labels for better mobile UX
- LeftSidebar/RightSidebar: added className prop for 'open' class
- Topbar: wired hamburger onClick + added mobile-drawer-toggle button for right panel
- App.tsx: added SettingsModal import/state/render, passed className props to sidebars
- styles.css: mobile sidebars now fixed slide-in overlays (translateX) instead of display:none
- ui.types.ts: added className to RightSidebarProps, onOpenLeftDrawer/onOpenRightDrawer to TopbarProps
- Tested at 390px viewport: both sidebars slide in correctly, transform verified via DOM
The component uses className="app-body" but CSS targeted .main for the grid layout.
This caused leftbar, canvas, and rightbar to all render at full viewport width
instead of the 3-column grid (leftbar 64px | canvas 1fr | rightbar 240px).
A0 Orchestrator
Leopoldadmin