Interesting, but from a quick try there seems to be issues atm

Thanks for pointing that out, I'll check that when I have time

Alright, I believe I've fixed the issues you reported @ornicar. I had only tested on the user's own profile 🤦‍♂️
I've put the dropdown menu on the second line again, I didn't think there could be other ui components at this location.
But there's still some gray area, I see code in def mini() in RelationUi.scala that would probably break because of the remaining btn-rack classes, but I'm not sure where it's called exactly.

Do you see other things that need to be addressed in this PR?

Just let you know that this change made the profile page UI/UX worse for desktop users.
Read https://lichess.org/forum/lichess-feedback/watch-block-follow-actions-dropdown-menu-petition-to-reverse-changes?page=1 please.

@Paul-Etienne

We talked about this briefly and feel that if these items must be in a dropdown on desktop, a different icon such as kabob or a descriptive word with a down triangle would be preferable to hamburger. That's just a consistency thing (because all the other hamburgers in the app are "click to disclose").

I'm pinging you in case you'd like to handle this yourself. If not, just letting you know this code will be changed to either show the original buttons on desktop or use a different icon by someone else in the near future. Thanks for working on this, you are a hero to mobile profile browsers everywhere.

Thanks for the ping, and thanks @gbtami for letting us know about this request on Lichess forums.
I actually meant to reply on those threads but it slipped my mind.

So here's what I wanted to point out, everyone on these threads is upset about the UI changing from a button rack to a dropdown menu (I'm not going to discuss the fact that this could be due to fear of change or anything else, they have their reasons). But there's one thing that fails to be mentioned there, understandably so because I believe the forum users are mostly long time users of Lichess. That thing is that the button rack as it existed had another problem that this PR was addressing as well and I think it kind of flew under the radar, mainly because of the name of the original issue stating a problem with mobile. I'm talking about the very low affordance that these buttons offered, and that would be a problem that mainly newcomers would face.

Just so everyone's on the same page, affordance here means the ability for a user to understand the behavior something's going to have by performing an action on it (with my words, that may still not be clear enough, but feel free to Google the term to get a clearer definition). And what I mean by that is that those buttons only showed an icon that wasn't exactly standard. I think about the book indicating the player's opening, stuff like that. And you would have to hover over the button to get a clearer idea of what the button does, which isn't good UI and UX. One could not even really think about hovering on them and just don't really know what they do.

So yeah, this PR was also aiming at displaying the labels of those buttons in clear text. There was a suggestion in the original issue to add those labels in the button racks but it was decided that it would clutter the interface too much, hence the dropdown menu.
I think reverting to the old button rack would be a regression, but that could just be my opinion. I'd rather make the suggested change of displaying a different icon, which I get would be a improvement consistency wise.

And yes I should be able to work on it if needed.

@Paul-Etienne I just collected some places where lichess uses icon buttons without text.
Main page header
Played game, above the move list
Game analysis page, below the move list
Study page, below the board
Tournament page, above the standings list
Forum post header
Hover on user name

"And you would have to hover over the button to get a clearer idea of what the button does, which isn't good UI and UX." :)

OK, I was just joking. All I want to say using icon only buttons are sometimes reasonable, when available space is small.
And of course I know that icon only buttons are worse than icon+text ones. But hiding frequently used action buttons behind a hamburger is even worse especially when there is space to use (I'm talking about desktop screens here).

My suggestion is to provide icon+text for important/frequently used actions (Challenge, Message, Follow, Block) and another "...more" to open the dropdown for the remaining ones on desktop and full hamburger for mobile.

Your joke doesn't ridicule my point, it just goes to show that there are other parts of Lichess that have somewhat obscure UI.
But yeah, point taken. I guess not everything can be addressed that quickly. Still I think it's a good thing to improve gradually.

Now it's true that this current solution may no be the best one, it solves some problems but does bring some new ones. There's the consistency problem that schlawg was mentioning, and there's what you're pointing out. In addition to kind of wasting the available space, it may be a bit too discreet in a way, for actions that are pretty important.

I have to say I really like your suggestion, it looks like the best of both worlds. The most used actions would remain accessible in a single click without hovering and would reclaim the available space, and the UI wouldn't get cluttered with all the labeled buttons. Plus it would be way more obvious that there are other actions available in this "More" dropdown menu. It could be a labeled button with a down triangle like in schlawg's suggestion.

I'm voting for this solution ;)

Just so the people interested in this issue know, I'm finally taking the time to implement what's been discussed in those last two comments.

I'm almost done with the implementation. I'm placing the user actions back into a button rack but which includes the actions' label in addition to the icon. The rack dynamically uses the available width of its container until no more buttons can fit without overflowing or using a new line. Then the remaining buttons are placed under a "More" button with a small arrow facing downwards.
When the available width isn't enough to display a single button in addition to the "More" button, the latter becomes a hamburger that holds all of the user actions, so that the current behaviour remains the same on mobile.

I guess the last question that remains is what actions are the most used, and thus what actions should be placed first in this button rack so that they are more likely to be shown without having to display the drop-down menu?