fix: keep the cover upload button the same size in every editor mode - #267

problem

On desktop widths (lg+), the track editor's "upload cover" button was 118px tall in normal mode and 120px in advanced mode. Turning on the comment field or the dj rows had the same effect, so the button changed size by 2px when you switched modes.

cause

The button had no fixed height on desktop. It used lg:h-auto lg:min-h-24 lg:max-h-30 lg:flex-1, so it stretched to fill the cover column down to the bottom of the form column, up to a 120px cap:

• In normal mode, the form column ends at the download button, so the button stretched to 118px.
• In advanced mode, and whenever the comment or dj rows are showing, the column is taller, so the button stopped at the 120px cap.

useEditorModeLayoutAnimation also measured [data-cover-upload] before and after each mode switch and animated its flex-basis between the two heights. That code existed only to support the stretching.

what changed

• src/features/editor/coverArt.tsx: the desktop button now has a fixed lg:h-29.5 (118px, the height it already had in normal mode). The lg:h-auto lg:min-h-24 lg:max-h-30 lg:flex-1 stretch classes are gone.
• src/features/editor/TrackMetadataEditor.tsx: removed the cover upload height measurement and animation (getCoverUpload, the two height refs, and the editorBodyRef that was only used to find the button). The download actions still slide the same way when you switch modes.

Below lg, nothing changes: the button is still h-10 (40px).

screenshots

Same viewport (1440×900), same track (tagged.mp3), advanced fields turned on. The magenta overlay is not part of the app; it shows the button's measured height.

before

after

Measured heights (px):

review guide

setup: in settings, turn on "show advanced fields". Optionally turn on dj analysis too. Import any track (e.g. tests/e2e/local-editing/fixtures/tagged.mp3) at a width of at least 1024px.

flows

1. Switch between normal and advanced using the toggle in the editor header. The upload cover button should stay the same size, without moving or resizing. The download actions should still slide smoothly.
2. Turn dj analysis on and off. The button height should stay the same.
3. Shrink the window below lg. The button should be the 40px horizontal bar, as before.

edge cases

• In advanced mode, and with dj rows on, the button no longer stretches to line up with the download button. A fixed size requires this.
• The cover-linked and processing states still use the same button, so they get the same fixed size.

decision to review: I used 118px (lg:h-29.5), the current normal-mode height, so the default view looks the same as before. The other option is the old 120px cap (lg:h-30), which would make normal mode 2px taller instead.

verification

automated (all passed locally)

• bun run typecheck
• vp lint on the two changed files
• vp fmt --check
• vp test run: 388 tests passed
• vp exec playwright test on chromium with --workers=3, running cover-art, track-editing, dj-analysis and vorbis-comments: 19 tests passed
• I measured the button height with Playwright in the dev server, using the viewports in the table above

still manual

• Watch the mode-switch animation at normal motion speed. My screenshots used reduced motion.
• Check firefox and safari.

Made by Claude Opus 5.5 (claude-opus-5-5) running in Claude Code inside T3 Code.