MBS-13241: Prevent recording bubble from shifting.

[derat]

MBS-13241

Set "vertical-align: top" on the tracklist table rows at /release/add#recordings to prevent the "Edit" button from shifting vertically depending on the height of the track and recording titles, which was causing the bubble that contains the recordings list also shift vertically.

Also set "vertical-align: top" on the recording rows since it looks odd when the artist name and duration aren't aligned with the top of a multiline recording title and disambiguation.

Problem

The bubble that lists recordings often moves vertically when a recording is clicked, which can be disorienting. This happens because the bubble is aligned with the "Edit" button, which is vertically centered within its row, and the row's height can increase when the selected recording has a long title or disambiguation.

The vertical alignment of text within the tracklist and recordings list also looks a bit strange due to each cell being vertically centered.

Solution

Add CSS to ensure that each cell's contents are vertically aligned with the top of the row.

Before:

After:

Testing

I've been opening /release/add?release-group=0da580f2-6768-498f-af9d-2becaddf15e0 and adding a single "Fight Fire With Fire" track with length 4:45. There are plenty of recordings to select, some of which have long disambiguations. Without this change, the bubble moves vertically when clicking between recording without a disambiguation and one with a disambiguation. With the change, it (usually) doesn't move.

As described on the ticket, I've noticed that the bubble sometimes still shifts when I click a recording while scrolled all the way to the bottom of the page. I haven't been able to find any JS that's responsible for this and suspect that it may be builtin behavior in Chrome. I haven't had a chance to test whether the same thing happens in Firefox or not.

I won't be able to test this PR locally until next week, so I've just been using DevTools in Chrome 115 and Firefox ESR to apply these rules to the beta site and verify that they work as expected.

[yvanzo]

Thanks for your contribution! The CSS changes look good to me.

I tried to test it locally but the sample database doesn’t have a lot of suggested recordings. It has to be tested with the full database. It is a limited change thus merging to beta now. 🚢

[derat]

Thanks for the quick review and merge!

I think I might make a small followup change to tweak the cells' vertical padding a bit more. It looks like td.name and td.length both have padding-top: 1em, but the number on the left (td.position) and the edit button (td.buttons) don't, so they end up flush with the top of the cell now. Sorry for not noticing this earlier:

[yvanzo]

No problem. Would you prefer to have it deployed on test.mb.o instead?

[derat]

No problem. Would you prefer to have it deployed on test.mb.o instead?

I'm happy with whatever you recommend! I've created #3022.

[yvanzo]

That was just in case it was likely to require more iterations, but it doesn’t seem to be needed, so I deployed #3022 directly to beta.