# Upload First-Fold Layout Design

**Goal:** Make the upload page fit the primary workflow into the first visible desktop viewport so users can immediately see upload, mode selection, subtitle defaults, and dubbing choices without needing to scroll to discover more options.

## Context

The current upload workbench fixed the horizontal clipping problem, but the vertical footprint is still too tall. The page header, large upload surface, generous card spacing, subtitle preview height, and long TTS list combine to push the language card below the fold on common desktop windows.

That creates a discovery problem: users may not realize the page continues below, so important settings can be missed entirely even though the layout is technically responsive.

## User-Approved Direction

The approved direction is:

- keep everything on a single page
- prioritize first-fold visibility on common desktop screens
- avoid making users scroll to discover key settings
- compress the current layout rather than changing the product flow

## Approaches Considered

### Option A: Compact first-fold workbench

Reduce vertical whitespace, shorten the upload card, tighten the right-side cards, and replace the tall language list with a compact always-visible button grid.

**Pros**

- Preserves the current workflow and layout logic
- Directly addresses the "hidden options below the fold" problem
- Keeps all major choices visible at once

**Cons**

- Requires denser spacing and more careful visual balance

### Option B: Merge the settings cards

Combine multiple settings sections into one large card to reduce stack height.

**Pros**

- Fewer visual blocks
- Lower total vertical gap

**Cons**

- Weakens hierarchy
- Makes scanning and editing harder

### Option C: Move one settings section into the upload card

Embed mode selection or language selection into the left upload card.

**Pros**

- Reduces right-column height quickly

**Cons**

- Creates mixed responsibilities inside the upload card
- Makes the composition feel less structured

### Recommendation

Use **Option A**. It preserves a clear workbench layout while making all key actions visible in the first fold.

## Architecture

### Header Compression

The upload-page header should become a slimmer top strip:

- smaller vertical padding
- smaller title scale
- reduced bottom margin
- language switcher remains visible but no longer consumes hero-card space

The header still provides context, but it should stop competing with the main workspace for height.

### Upload Card Compression

The left upload card should remain the primary visual anchor, but it no longer needs a tall poster-like dropzone.

Adjustments:

- reduce top summary spacing
- shorten the dropzone height substantially
- tighten the button and support-copy spacing
- keep mode summary compact

The upload action should still read as primary, just not oversized.

### Right Column Compression

Keep the three semantic cards:

1. mode and workflow
2. subtitle defaults
3. language and dubbing

But each card should be tightened:

- smaller paddings
- smaller inter-card gaps
- smaller preview panel
- less decorative empty space

### TTS Language Visibility

The biggest vertical cost comes from the current alphabet-tab + scrolling list treatment. Replace it with an always-visible compact grid of language buttons.

For the current supported languages, a compact grid is sufficient and preferable because:

- all options are visible immediately
- there is no hidden overflow area
- the user does not need to infer that more settings exist below

This is a visibility optimization, not a data-model change.

## Layout Rules

### Desktop-First Height Budget

Target the upload page body to sit comfortably within the first fold on common desktop heights. The implementation may use:

- tighter shell spacing
- a more compact upload-card min height
- reduced card gaps
- right-column sections that size to content without scroll regions

### No Discovery Scroll for Core Options

Core settings that must be visible without scrolling:

- upload entry point
- mode selection
- subtitle default preview and sliders
- subtitle language context
- all supported TTS language options
- primary "Generate Translated Video" button

### Fallback Behavior

If the viewport is unusually short, the page may still scroll slightly. But normal desktop usage should not require scrolling to discover additional settings.

## Interaction Details

### Mode Selection

Mode options should become denser selection blocks. Keep both options visible at once, but reduce their height and spacing.

### Subtitle Defaults

Keep:

- reset action
- preview
- position slider
- size slider

Reduce the preview height enough to preserve usefulness while reclaiming space.

### TTS Languages

Present the current supported languages as a compact grid, using the existing localized labels and current selection styling. Remove the alphabet tabs and long per-letter sections because they optimize for a larger catalog than this page currently has.

## Testing Strategy

Add or update tests to cover:

- the compact upload layout still renders all major cards
- all TTS language buttons remain visible without the old tabbed list structure
- existing subtitle default interactions still work
- upload behavior and trim flow are unchanged

Manual verification should focus on a common desktop viewport to confirm that the bottom card no longer drops below the fold.

## Out of Scope

This revision does not:

- change the upload workflow
- add or remove supported languages
- redesign the editor screen
- change backend contracts

## Rollout Notes

Success means a user can land on the upload page and immediately understand every major choice without needing to notice or guess that the page continues below the fold.