[AyobamiH]

Description

Makes the editor usable on small mobile screens while preserving the existing desktop three-column layout.

This keeps the change focused on Issue #18:

• adds a small-screen Code / Preview / Style workspace switcher
• keeps Preview as the default mobile workspace
• makes the top bar and playback controls fit common mobile widths without horizontal scrolling
• reuses the existing Code, Preview and Style components/state rather than adding duplicate mobile implementations
• preserves the existing desktop three-column editor
• adds Playwright coverage at 320px, 375px and desktop width

Related issue

Closes #18

Type of change

• Bug fix
• New feature
• Documentation
• Refactor / maintenance
• Other (please describe)

How has this been tested?

Final validated head: d982607b708b43bb1facc7f8d9a33a0add07e3e0.

The final head passed the full CI suite both in my fork and upstream, including Playwright, lint, unit tests and typecheck/build.

An earlier upstream CI run exposed a Playwright/WebGL starvation issue in projects.spec.ts. I reproduced the same failure against the exact upstream main tree before modifying the test harness, confirming that the responsive feature was not required to reproduce it.

The resulting test-only stabilisation centralises preview pausing in e2e/app.ts and uses it from the project-persistence and responsive tests. It pauses the animated WebGL preview during unrelated interactions, including when the Preview workspace is visually hidden on mobile. No application behaviour is changed by these test-only changes.

Local verification included:

npm run format:check
npm run lint
npm run test:unit
npm run build
npx playwright test e2e/responsive.spec.ts --workers=1
CI=1 npx playwright test e2e/playback.spec.ts
git diff --check upstream/main...HEAD

The responsive Playwright coverage verifies:

• 320px: Preview and primary controls remain visible without horizontal overflow
• 320px: Code / Preview / Style switching preserves editor state
• 375px: Preview and primary controls remain visible without horizontal overflow
• 375px: Code / Preview / Style switching preserves editor state
• desktop: the existing three-column editor remains visible and the mobile workspace switcher is hidden

Manual checks also covered playback interaction, timeline scrubbing, Projects, Save/Export reachability, Code editing, Style changes, state retention and returning to Preview.

Video evidence

320px: Preview, primary controls and horizontal overflow

Shows the preview remaining usable at 320px, playback controls fitting without horizontal scrolling, and the primary Projects, Save and Export controls remaining reachable.

codereel-issue-18-320px-preview-controls.webm

320px: Code / Preview / Style switching and state preservation

Shows the mobile workspace switcher moving between Code, Preview and Style while preserving editor state.

codereel-issue-18-320px-workspace-state.webm

375px: Preview, primary controls and horizontal overflow

Shows the same responsive behaviour at 375px with the preview and primary controls remaining usable without horizontal overflow.

codereel-issue-18-375px-preview-controls.webm

375px: Code / Preview / Style switching and state preservation

Shows Code, Preview and Style switching at 375px while retaining editor state.

codereel-issue-18-375px-workspace-state.webm

Desktop: Existing three-column editor preserved

Shows the existing desktop Code / Preview / Style three-column layout remaining intact at desktop width.

codereel-issue-18-desktop-three-column-preservation.webm

Screenshots

Video evidence above covers both mobile widths and desktop preservation.

Checklist

• My code follows the style of this project
• I have tested my changes locally
• I have updated documentation where needed
• My pull request targets the main branch
• I have read the Contributing guide

[vercel]

@AyobamiH is attempting to deploy a commit to the Jaoude Studios Team on Vercel.

A member of the Team first needs to authorize it.

[AyobamiH]

GitHub checks are green on d982607. The only remaining blocker is Vercel team authorisation for Jaoude Studios. Could a team member authorise the deployment and rerun the check?