[codex] Improve timeline controls UX

[KyleTryon]

Summary

• keep the initial timeline zoom focused on the editable clip range instead of fitting the whole source
• anchor zoom buttons around the playhead/selection and keep wheel zoom cursor-anchored
• improve editor time formatting with hours and centiseconds
• make the mobile editor scroll naturally so the preview and timeline stay usable
• move zoom controls out of the timeline ruler hit area

Validation

• pnpm --filter @cliparr/frontend test
• pnpm --filter @cliparr/frontend lint:types
• pnpm --filter @cliparr/frontend lint:eslint
• browser check with a mocked 123:45 session at desktop and 390px mobile widths

[Copilot]

Pull request overview

This PR refines the frontend editor timeline UX by (a) choosing an initial zoom/scroll that focuses on the editable clip selection, (b) improving zoom anchoring behavior (buttons anchor around playhead/selection, wheel zoom stays cursor-anchored), (c) enhancing time label formatting, and (d) making mobile layout scrolling behave more naturally.

Changes:

• Adjust initial timeline zoom selection and initial scroll positioning to focus on the clip selection range.
• Improve zoom anchoring by supporting an explicit anchor time in zoom updates (while keeping wheel zoom cursor-anchored).
• Update editor time formatting to include hours and centiseconds when applicable, and tweak layout/CSS to keep controls usable.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
apps/frontend/src/index.css	Repositions timeline overlays/controls and updates container padding/background to keep zoom controls out of the ruler hit area.
apps/frontend/src/components/EditorScreen.tsx	Adjusts main layout overflow/min-heights for more natural mobile scrolling while keeping desktop behavior intact.
apps/frontend/src/components/editor/useEditorTimeline.ts	Implements focused initial zoom/scroll behavior and anchors zoom buttons around the playhead/selection.
apps/frontend/src/components/editor/timelineZoom.ts	Adds support for an explicit anchorTime to keep a specific time visible across zoom changes.
apps/frontend/src/components/editor/timelineZoom.test.ts	Extends tests for explicit anchor-time zooming, focused initial zoom selection, and updated time formatting.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.