3.5 KiB
Upload Three-Card Row Design
Goal: Move the "Language & Dubbing" card into the same first-row layout as "Upload source video" and "Mode & Workflow" so the page presents three immediately visible decision areas across the top.
Context
The compact first-fold redesign reduced vertical overflow, but the page still communicates a two-column mental model:
- a dominant upload card on the left
- a vertical stack of settings cards on the right
Even after compression, the language card still feels like a secondary block that lives below the more obvious controls. The user wants that card elevated into the first visible row so the primary choices are laid out horizontally and read in one scan.
User-Approved Direction
Use a first-row, three-card layout:
- Upload source video
- Mode & Workflow
- Language & Dubbing
Move "Subtitle Defaults" to the second row beneath those three cards.
Approaches Considered
Option A: Three-card top row with subtitle defaults below
Make the page body a two-row grid:
- row 1: upload / mode / language
- row 2: subtitle defaults
Pros
- Matches the requested visual model exactly
- Makes the most important choices visible in one scan
- Preserves semantic card boundaries
Cons
- Requires a larger grid refactor than simple spacing tweaks
Option B: Keep two columns and visually pull language upward
Keep the current grid but reorder the right-column cards so language appears above subtitle defaults.
Pros
- Smaller code change
Cons
- Still reads as one left card plus a stacked sidebar
- Does not satisfy the "three cards in one row" requirement
Option C: Merge mode and language into one card
Reduce the top row to two cards by combining controls.
Pros
- Simple height management
Cons
- Weakens scannability
- Mixes unrelated concerns
Recommendation
Use Option A.
Architecture
Top-Level Grid
The upload workbench should become a two-row desktop grid with named regions:
uploadmodelanguagesubtitle
On large desktop widths:
- upload card occupies the wider left column
- mode and language cards sit as two narrower sibling cards to its right
- subtitle defaults spans the width beneath the row or sits below upload and settings depending on the final proportion
The important part is that upload, mode, and language share the same first visual row.
Card Ownership
Keep card responsibilities clear:
- Upload card: file selection, supporting copy, current mode chip
- Mode card: editing vs simple mode
- Language card: subtitle language context, TTS language choices, primary generate button
- Subtitle card: preview, sliders, reset action
Responsive Behavior
Desktop-first behavior should prioritize the requested three-card row. At narrower widths, the layout may stack back down, but on the target desktop viewport the first row must visibly contain all three cards.
Testing Strategy
Add or update tests to cover:
- the language card remains present and visible as a first-class card
- the first-row structure exposes distinct upload, mode, and language regions
- the language grid remains intact after the grid refactor
- subtitle defaults continue to behave the same after moving to a lower row
Out of Scope
This change does not alter:
- upload logic
- trim flow
- subtitle defaults behavior
- supported language set
- backend request contracts
Rollout Notes
Success means the user can open the page and immediately see three top-level cards in the first row: upload, mode, and language.