[ux-timeline-editor-library-rail-occludes-mobile-canvas] VideoTimelineEditor library panel pushes video preview and timeline 600px below fold on small viewports

[atomantic]

Problem

In VideoTimelineEditor (client/src/pages/VideoTimelineEditor.jsx:755-758), the page layout is structured as a 3-column grid on large screens and a stacked 1-column layout on smaller screens:

<div className="grid grid-cols-1 lg:grid-cols-[260px_1fr_240px] gap-3 min-h-[400px]">
  {/* Left rail — library */}
  {showLibrary && (
    <div className="bg-port-card/50 border border-port-border rounded-lg p-2 max-h-[600px] overflow-y-auto">
      ...
    </div>
  )}
  {/* Center — preview + tracks */}
  <div className="space-y-3 min-w-0">...</div>
  {/* Right rail — inspector */}
  <div className="bg-port-card/50 border border-port-border rounded-lg p-3 space-y-3">...</div>
</div>

showLibrary initializes to true (line 112). On viewports under 1024px (including mobile viewports at ~375px), the Library rail renders first in DOM/grid order and takes up to 600px of vertical height (max-h-[600px]).

Trigger

1. On a mobile device or responsive viewport (< 1024px width, e.g. 375px × 667px), navigate to /media/timeline/:projectId.
2. Observe the initial view above the fold.
3. Tap "+ Add to timeline" on any clip tile in the library.

Impact

• The 600px library panel completely pushes the primary workspace (video preview player, playback controls, scrubber, timeline tracks, and inspector) below the fold.
• When the user taps "+ Add to timeline", the timeline updates off-screen at the bottom without any visible feedback or confirmation above the fold.
• The user is forced to scroll past hundreds of pixels of library items to see their video canvas and arrange clips.

Proposed Fix

1. Apply responsive flex/grid ordering so the primary preview and timeline render first on mobile:
   • Preview/timeline container: order-1 lg:order-2
   • Library container: order-2 lg:order-1
   • Inspector container: order-3
2. Default showLibrary to false on initial load when window.innerWidth < 1024 (or initialize via typeof window !== 'undefined' ? window.innerWidth >= 1024 : true), letting mobile users open the library drawer/panel when needed.
3. Files touched:
   • client/src/pages/VideoTimelineEditor.jsx
   • client/src/pages/VideoTimelineEditor.test.jsx

Acceptance Criteria

• On mobile viewports (< 1024px / 375px), the video preview and timeline controls are visible above the fold on page load.
• The Library rail can be toggled via the "Show/Hide library" button without pushing the preview off-screen.
• Adding clips/stills/audio updates the visible timeline with immediate user feedback.
• Existing desktop layout (grid-cols-[260px_1fr_240px]) remains unchanged.