Create responsive mobile-friendly editor layout

[clencyc]

Description

The editor needs a mobile-optimized layout that works on tablets and phones:

• Collapsible sidebar for media assets
• Touch-friendly controls and buttons (min 44x44px)
• Bottom sheet for properties panel on mobile
• Stack layout for smaller screens

Acceptance Criteria

• Works on screens 320px wide (iPhone SE)
• Works on tablets (768px - 1024px)
• All controls are touch-friendly (44x44px minimum)
• Sidebar collapses on screens < 640px
• No horizontal scrolling on mobile
• Tested on real devices or Chrome DevTools
• Performance still good on lower-end phones

Implementation Details

• Update Tailwind responsive classes
• Create mobile-specific components if needed
• Test with Chrome DevTools device modes
• Consider touch events vs mouse events

Testing Checklist

• iPhone 12/13 Pro (390px)
• iPad (768px)
• Android (various sizes)
• Landscape and portrait orientations

Difficulty: Medium-Hard

Estimated time: 4-5 hours