Summary
The "Upload" step of Upload Wizard has grown its layout over many years: a centered column next to full-width elements, gaps that can look accidental, and a mix of hard-coded em and px values. Aligning the step with the Codex design tokens for sizes and spacing could make it feel more consistent with the rest of MediaWiki, and make the styles easier to maintain.
Current situation
- The file list, the "Add more files" box and the EXIF notice sit in a centered 650px column, while the steps indicator and the buttons span the full width. This leaves a large empty area on the left and makes the left edges ragged.
- The file rows have no visible boundary, so the status icon floats far to the right, somewhat detached from its row.
- Spacing mixes 3em, 2em, 1.5em, 40px, … and some margins stack up (e.g. an empty, padded error-summary container adds blank space above the buttons on every step).
- "1 of 1 file uploaded" ends up alone on the far right, below the buttons, repeating the "All uploads were successful!" message.
- The "Add more files" box, the file list and the notice all have different widths.
- The overall width is max-width: 900px; /* wild guess */.
Proposal
I'd suggest using Codex tokens and patterns where they fit naturally:
- Width: @size-5600 could replace the "wild guess" 900px, with the file list, the "Add more files" box, the notice and the buttons all using that full width, aligned with the steps indicator.
- Alignment: Left-aligning the content instead of centering the column would give everything one shared left edge.
- Spacing: @spacing-* tokens (@spacing-50 … @spacing-250) could replace the ad-hoc em/px values, and stacked spacing could be removed (e.g. by hiding the error-summary container while it's empty).
- File list: A subtle, Card-like border (@border-color-subtle, @border-radius-base) might help each row, including its status icon, read as one unit.
- Buttons: The result message and "Continue" could be right-aligned like on the other steps (OOUI's HorizontalLayout uses flexbox and currently ignores text-align).
- Progress: While uploading, the progress bar could share a line with the Back button, followed by "1 of 3 files uploaded · a few seconds". Once uploads are done, the count might fade out together with the bar, since the result message already says the same. The fade could use a CSS transition with Codex transition tokens instead of jQuery's fadeIn/fadeOut, which would also resolve two old FIXMEs.
- Alignment detail: The "Remove"/"Retry" icons could line up with the text above by relying on OOUI's own first-child rule instead of a magic number.
Possible benefits
- A calmer, more balanced Upload step that might feel more at home next to other Codex-based interfaces.
- Sizes that follow the reader's font-size setting (@size-5600 compiles to 56em), rather than a fixed pixel width.
- Fewer magic numbers, which could make future changes (dark mode, skin changes) easier.
- Several small irritations addressed at once, without changing any behavior.
Notes
- Codex doesn't seem to offer a stepper/wizard component (yet), so the arrow-shaped steps indicator (jquery.arrowSteps) would stay. It already uses Codex color tokens.
- Since @size-5600 is 56em, the content would get a bit narrower than today at the default font size (~784px at 14px). If that feels too narrow, a different token might fit better.





