Scroll bar for tags

[solstice23]

resolves #5983

This shows all tags instead of the first 20 tags previously and adds a scroll bar if the tags will overflow.

before

after

I did it in a hacky way and probably need a better solution.

The example beatmap: https://osu.ppy.sh/beatmapsets/1656663#osu/3381471

[peppy]

Not sure how well this fits with the upcoming redesign of this page (#7899). Might be easier to implement as part of that PR, if it's not already the case.

[nanaya]

Still waiting on @arflyte for the response on new design as well (currently it's the same cutting off after certain number of tags).

[arflyte]

Most probably I'm going to introduce a hover popup for the new design to show extra tags.

[smoogipoo]

@arflyte Is this the final design for this tags popup? It's the only one I can find on the design

[arflyte]

Yes, it's the new design. I forgot to move it to the finalised design area. It is fixed now.

[smoogipoo]

Does that popup have a scrolling overflow of its own? The limit is 1000 characters. Or does it just keep expanding vertically until that limit?

[arflyte]

No scrolls. Expand till the limit.

[peppy]

How does this popup work? Does it appear precisely in place so the tags already being displayed don't move? (but do change in colour/design?)

[arflyte]

As mentioned in the design, it pops up when the ellipsis is clicked; this allows the tags to be clicked easily. It appears next to the ellipsis. Clicking outside the popup will close the popup.

[peppy]

Are you able to link the design? The link above takes me to a figma document with about 30 different screens.

[arflyte]

Unfortunately can't link the exact screen :( It's on the second screen at the top. Ignore everything underneath the red line.

[peppy]

Here's a screenshot for those that don't want to fiddle with figma.

[notbakaneko]

using #10030 instead