feat(frontend: soundboard): adjust sound button sizes to improve UX

[richard-kramer]

After upgrading my "live" soundboard to the latest development version, I found the visuals of many sounds together with long names pretty unpleasent. Also the local playback buttons are too bright and eyecatchy for my taste.

I tried adjusting the button sizes a bit to better fit their content (and don't allow more than two lines for the label). They now expand horizontally to allow the text to span two lines (this is approximated). In extreme cases vertical expansion is also possible, but I only got this with one singe really long word.
Unfortunately, I was not able to find a pure CSS solution and had to hook some JS into the component rendering. I also increased the maximum content width a bit and dimmed down the local playback buttons.

Desktop

before

after

Mobile

before

after

[dominikks]

I like the changes, especially the changes to the colors!

However, I think I'd prefer if the buttons were all the same size to have uniformity (to be clear, I don't mean the same size as before, but just identical size between them). I was thinking of just cutting off long names after 2 or 3 lines using an ellipsis (...). 🤔 I also thought about decreasing the horizontal margin within the buttons and making the local playback button a bit smaller (this can be done using Angular Material's density feature @include mat.icon-button-density(-4)) to increase the space for longer names.

[richard-kramer]

I thought about this as well. But then I would also add popup-tooltips to show the full name or something. And I could not get this to work this fast. But I actually also don't dislike the ununiformity. For me it makes identifying sounds even a bit easier, as their buttons are visually a bit more distinct because of the different sizes. It seems a bit more "organic".

But I could also try to implement the ellipsis solution.

[dominikks]

I see what you mean, the different sizes might make it easier to discern sounds. Just from looking at it, I intuitively prefer the uniform grid, but that might also be a case of me needing to get used to it.

One thing to keep in mind: the buttons will probably change size depending on which other sounds they are in a row with (I think?). So one button might also have different sizes depending on the context and using the search will probably lead to a lot of "jumping around" in the UI.

I think I prefer the uniform grid, but we can also keep the different widths for a while and see how nice that is to use. I'd definitely like the buttons to all have the same height though. 😅

[richard-kramer]

Yeah, the height actually bothers me too. But thats just that one button that contains one single extremely long word 😅 (and all the others in the same row...but 🤷). But maybe an ellipsis and tooltip would be the better solution here.

And the search was always a lot of jumping around, as never the same "block" of sounds would come up in a result. But it's true, they don't keep one single size, which might be disorienting. I'll see, if I can get something together, which works with ellipsis and tooltips and if it looks better.
But I would also like to trie this layout a bit and see, if it works in the real world. And if it doesn't, the change could always be reverted. Would that be an option?

If I can get both "designs" to work, this might even become a setting the user can select for himself? Best of both worlds.

[dominikks]

Sure, sounds good to me. 👍 So you want to keep the varying heights for now?

I'll look over the code later this evening and maybe see if I can find a solution without JS for layouting. :D

[richard-kramer]

The heights are ok for me, as they are only very specific exceptions.

[dominikks]

LGTM!