Optimize React competition overview page spacing on mobile

[gregorbg]

Tries to squeeze out even more room for folks who get very excited at the notion of squishing one more competition on their phone screen.

Tablet

Mobile

The legacy view can still barely squeeze one more competition, but I feel that with the layout improvements of the table and the information generally being quite "dense" in the old view, this is a good trade-off

[kr-matthews]

On desktop, about 90% of the time that a competition row needs more space, it's because the location requires a 2nd line. The other 10% is when the date needs 2 lines (because it spans 2 months) or the venue needs 2 lines. I don't see any competition names on 2 lines though. Maybe the location column width could be increased slightly, at the expense of the competition name column?

[gregorbg]

On desktop, about 90% of the time that a competition row needs more space, it's because the location requires a 2nd line. The other 10% is when the date needs 2 lines (because it spans 2 months) or the venue needs 2 lines. I don't see any competition names on 2 lines though. Maybe the location column width could be increased slightly, at the expense of the competition name column?

Funnily enough, I already did that in this very PR: 6666bee

Just forgot to add pictures.

Before

After

[dunkOnIT]

The main difference between the old and new mobile UI's seem to be that the location in old is allowed to use the full width of the row it's in, while in the new UI it stops before the date tag. Is there no way to have it take up the full width? (It doesn't look like it would collide with the date tag - but even if it would, we can add a tiiiiny bit more spacing between them, making the row slightly taller, and still save a LOT of space from all of the text that's not wrapping to a second row).

[gregorbg]

The main difference between the old and new mobile UI's seem to be that the location in old is allowed to use the full width of the row it's in, while in the new UI it stops before the date tag. Is there no way to have it take up the full width? (It doesn't look like it would collide with the date tag - but even if it would, we can add a tiiiiny bit more spacing between them, making the row slightly taller, and still save a LOT of space from all of the text that's not wrapping to a second row).

This is already done and all fixed. The markup is virtually identical to the old layout. Only the line break calculations are a tad bit different, which I haven't been able to debug down until the very last detail.

[dunkOnIT]

Perhaps I'm missing something or I described it badly - but on the current branch of this PR the new UI clearing wraps to a new line earlier than the old UI, causing unnecessary extra lines

New UI:

Old UI:

[gregorbg]

Ah, then you just managed to find one particular screen size where the line break was just barely squeezed in. I have mitigated by introducing a "ghost margin" of 1px. Not beautiful, but couln't think of anything better :/

[gregorbg]

And to be honest, 320x480 isn't the most realistic screen size to try and play around with in 2024/25, so my willingness to fix super-duper edge cases like that is limited

[dunkOnIT]

Thanks for the fix!