video_translate/docs/plans/2026-03-21-upload-workbench-redesign-design.md

Upload Workbench Redesign Design

Goal: Redesign the upload page so the right-side controls are always accessible, the layout adapts cleanly across viewport widths, and the page feels like a coherent product workbench instead of a squeezed form.

Context

The current upload page uses a fixed two-column flex layout inside a constrained max-w-6xl shell. The left upload area grows aggressively while the right settings column is locked to w-[400px]. Combined with h-screen, centered alignment, and large outer padding, the layout runs out of horizontal space quickly and the right column becomes partially or fully clipped on narrower desktop windows.

Functionally, the page already collects the right information:

• upload source video
• choose work mode
• define initial subtitle defaults
• choose TTS language

The redesign should preserve that workflow. This is a front-end layout and presentation change, not a product-flow rewrite.

User-Approved Direction

The approved direction is:

• keep a desktop-friendly left/right split layout
• automatically stack into a top/bottom layout on narrower viewports
• preserve the current page flow and controls
• make the upload area the primary focal point
• keep settings visible, grouped, and readable without horizontal clipping

Approaches Considered

Option A: Responsive dual-column workbench

Keep the existing information architecture, but replace the rigid flex layout with a responsive grid that shifts from dual-column to single-column when space is limited.

Pros

• Solves the clipping problem directly
• Preserves current user workflow
• Requires changes mostly in the upload page shell and card structure
• Keeps settings visible without hiding them behind extra clicks

Cons

• Requires reworking spacing, hierarchy, and card composition

Option B: Settings drawer

Collapse the right-side controls into a slide-over drawer triggered by a button.

Pros

• Eliminates horizontal overflow entirely
• Can simplify the initial page appearance

Cons

• Reduces discoverability of settings
• Adds an extra interaction before upload
• Makes subtitle default preview less immediately useful

Option C: Multi-step wizard

Split upload and settings into separate steps.

Pros

• Very clear progressive flow
• Maximum focus per step

Cons

• Changes the product flow more than requested
• Adds more navigation state
• Unnecessary for the current page complexity

Recommendation

Use Option A. It fixes the visibility problem without changing the product's mental model.

Architecture

Page Shell

Replace the current h-screen centered flex shell with a top-aligned min-h-screen workbench container. The page should use:

• a lightweight header area with page title, support copy, and language switcher
• a responsive content grid for the upload page body
• natural document scrolling instead of forcing the full screen height

This removes the clipping pressure caused by vertical centering and fixed-height layout assumptions.

Responsive Grid

The main upload page body should use a grid with these rules:

• large desktop: two columns with a wide primary upload column and a narrower settings column
• medium desktop: still two columns, but with reduced gap and a flexible sidebar width
• tablet and below: a single-column stack with the upload card first and the settings cards below

Implementation should avoid fixed-width overflow by:

• using minmax(...) for the sidebar column instead of a hard-coded width
• adding min-w-0 to grid children so nested content can shrink safely
• limiting card internals rather than the full page height

Visual Hierarchy

The page should read as a workbench with one primary action and three supporting settings groups:

1. Upload area
2. Mode selection
3. Subtitle defaults
4. Language and dubbing settings

The upload card becomes the visual anchor of the page. The settings column becomes a structured sidebar of related control cards rather than a tall wall of similar white panels.

Header

Move the language switcher into a clear page header that also introduces the page. The header should include:

• a concise title
• one sentence explaining the workflow
• the existing bilingual switcher aligned to the right on larger screens and wrapping naturally on smaller screens

This removes the current disconnected top-right floating control feeling.

Layout Composition

Upload Card

The upload card should be the largest surface in the page. It contains:

• a strong heading and short instruction copy
• the drag-and-drop / click target
• supported format text
• optional contextual mode summary

The invisible file input should still power the interaction, but the visible button and dropzone should feel like one unified action surface.

Mode Card

Keep the two work modes, but restyle them as a cleaner segmented card section:

• each option uses consistent spacing and iconography
• selected state is obvious through background, border, and copy contrast
• the section remains compact enough for narrower widths

Subtitle Defaults Card

Preserve the existing subtitle preview and sliders, but make the card more compact and better balanced:

• preview area becomes shorter vertically
• reset action remains in the header
• control spacing is tightened
• the preview remains visually useful without dominating the sidebar

Language and Dubbing Card

Keep subtitle language and TTS language selection in one grouped card. The card should:

• present subtitle language as read-only contextual information
• keep the alphabet/popular tabs compact
• constrain the language list with internal scrolling
• pin the primary action button near the bottom of the card flow

On desktop, the settings column should use sticky behavior so the user can keep context while scrolling the page.

Responsive Behavior

Large Desktop

• two-column layout
• upload card and settings sidebar visible simultaneously
• settings sidebar can remain sticky

Medium Desktop

• still two columns
• reduced outer padding and inter-column gap
• sidebar width narrows within safe limits

Narrow Desktop / Tablet

• single-column stack
• upload card first
• settings cards follow underneath
• sticky behavior disabled

Mobile-Like Widths

Although the current use case is desktop-heavy, the layout should remain readable:

• all cards become full-width
• header content wraps cleanly
• button actions span full width where helpful
• no content should overflow horizontally

Interaction Details

Primary Action Clarity

There should be one clearly dominant action:

• before a file is selected, the upload surface is primary
• after a file is prepared, the final "Generate Translated Video" action remains the strongest button in the settings flow

The redesign should reduce the feeling of multiple competing calls to action.

Scroll Ownership

The full page should scroll naturally. Only the TTS language list should own an internal scroll region. The page should avoid nested full-height scroll containers competing with each other.

Behavior Preservation

The redesign must not change:

• the onUpload(...) contract
• subtitle default values or payload structure
• selected TTS language mapping
• trim modal flow

Testing Strategy

Add or update tests to cover:

• the upload page structure still renders all core controls after the redesign
• the language switcher remains available from the upload page shell
• subtitle preview still reflects size and bottom-offset changes
• upload confirmation still forwards the same payload values

Because responsive behavior is mostly CSS-driven, automated tests should focus on stable structural markers and interaction continuity. Final visual validation should also include a manual browser check across multiple viewport widths.

Out of Scope

This redesign does not include:

• changing the upload-to-editor workflow
• adding new subtitle styling options
• changing supported languages
• redesigning the editor screen
• altering backend request contracts

Rollout Notes

This work should remain contained to the upload experience and its tests. The main success criterion is simple: at the viewport width shown in the reported issue, the right-side controls must remain fully accessible without horizontal clipping, while the overall page looks more intentional and usable.