fix: Improve display for participant columns

[mbergen]

Summary

Remove the css that enabled positioning multiple participants in the same row, as it introduces scrollbars.
(see https://liquipedia.net/leagueoflegends/Portal:Tournaments#Qualifiers)

This means display is worse for tournaments with larger amounts of qualified participants or otherwise shared placements:

Ideally we'd have this wrapping while also not introducing scroll bars, but i have no idea how to make that happen.

How did you test this change?

dev

[hjpalpha]

/shrug

[Eetwalt]

Played around with it a bit to see if could get a sensible middleground:
https://liquipedia.net/commons/Module:TournamentsListing/CardList/dev/eetu1

So essentially:

• set nowrap = false to the participant columns
• wrap OpponentDisplays in a div with display: flex & flex-wrap: wrap & gap: 0.25rem
• wrap each OpponentDisplay in a div with width: fit-content (as the block opponents have width: 100%, they wont wrap otherwise?)
• set maxWidth = 30rem (or other sensible value) on the relevant columns

Still scrollbar on smaller screens, but that's intended with the new Tables anyway. But this way we can get no scrollbars on larger displays

Couldn't find your example, but looks decent for a couple participants at least.

[mbergen]

My example is from here: https://liquipedia.net/ageofempires/Age_of_Empires_II/Qualifier_Tournaments

The issue with your solution is that the amount of opponents per row varies based on length of their name, which is very hard to read when there's more than a handful.
Do you have ideas on how we could make the grid display that was previously/is currently used make look not that weird?

[Eetwalt]

My example is from here: https://liquipedia.net/ageofempires/Age_of_Empires_II/Qualifier_Tournaments

The issue with your solution is that the amount of opponents per row varies based on length of their name, which is very hard to read when there's more than a handful. Do you have ideas on how we could make the grid display that was previously/is currently used make look not that weird?

How about we keep the original multi-column layout for participants, but truncate the tournament column on smaller screens?
https://liquipedia.net/ageofempires/User:Eetwalt

This test makes sure the column is 15rem minimum, but grows if space allows. Also made the table width: 100%, so not sure if these tables are used in layouts this doesn't work

[mbergen]

That would be fine be me.
Making them 100% would also match the previous behavior, however display is a bit bad on pages with infoboxes as the table gets pushed down (e.g. https://liquipedia.net/ageofempires/T90_Titans_League).
This was the case with the old design on firefox before tho, at least chrome sometimes managed to display the table besides the infobox unless for very long tournament names.