# 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:

1. Upload source video
2. Mode & Workflow
3. 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:

- `upload`
- `mode`
- `language`
- `subtitle`

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.