Skip to content

Timeline panel default height is too tall (50% of editor) #6

Description

@MeepCastana

Problem

The timeline panel opens taking 50% of the editor height by default. That is far more than a new project needs — an empty or short timeline shows mostly blank track area while the preview, the thing the user is actually looking at, is squeezed into the other half.

Cause

// src/shared/state/editor-panel-layout-store.ts:18-24
const DEFAULT_PANELS: EditorPanelSizes = {
  tools: 25,
  preview: 50,
  properties: 25,
  mainContent: 50,
  timeline: 50,
};

mainContent: 50 / timeline: 50 splits the editor shell evenly. Consumed at src/features/editor/components/editor.tsx:485 and :626.

The panel constraints allow much more room to breathe:

// src/features/editor/components/editor.tsx:626-629
<ResizablePanel defaultSize={panels.timeline} minSize={15} maxSize={70}>

Suggested fix

Lower the default to somewhere in the 28–35% range and raise mainContent to match, so the two still sum to 100.

Two things to be careful about:

  1. The store is persisted. Anyone who has already opened the editor has timeline: 50 written to storage, so changing DEFAULT_PANELS alone will not affect existing users. Decide whether that's acceptable (new users only) or whether this needs a store version bump / migration.

  2. resetPanels() exists at editor-panel-layout-store.ts:43 — worth confirming it's reachable from the UI so users can get back to the new default.

Also worth a look: src/features/editor/components/editor.test.tsx:171 and :263 hardcode timeline: 50 and timelineDefaultSize: 35. Those two numbers already disagree with each other; whoever picks this up should reconcile them.

Acceptance criteria

  • A new user opening the editor for the first time sees a timeline noticeably shorter than half the screen
  • Panel sizes still sum to 100
  • Timeline remains resizable across the full minSize={15}maxSize={70} range
  • Decision documented in the PR on whether existing persisted layouts are migrated or left alone
  • npm run lint and npm run test:run pass

Good first issue — one constant, but read the persistence note first.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions