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