Put mobile UI profile actions into popup list with icon & text

[kuba-orlik]

When viewing someone's profile, especially on mobile, it's very hard to understand what do the buttons above the graph actually do.

On Desktop, I can at least hover over a button and check what it does by reading the hover popup, but on mobile those buttons are both hard to tap and the user is left guessing what the buttons actually do.

Changing the buttons from just icon to icon+text would make them much more understandable and usable

[Siderite]

Mobile space is in short supply. If you add text it would either be very small, not useful or ugly.

I was thinking of a general solution for tooltips on mobile, like clicking a button or a finger gesture and then tapping something with a tooltip would just show that tooltip instead of activating the button. But it's unwieldy. I remember there was an app where you could just drag and drop a ? icon over the things you wanted explained.

I have no idea what the design guidelines say about this issue, but it feels like a general issue between mouse and touch interfaces.

[kuba-orlik]

I took the liberty of drafting a modified version of the interface. I think that both desktop and mobile benefit from the labels just being visible without any prior interactions

[schlawg]

Any takers? There is isTouchDevice() in ui/common/src/device.ts if a mobile only fix is desired...

[ornicar]

I like the idea, there's a real problem to solve. However it could be solved differently. In most web and mobile apps, such actions are in a menu. Here's a mastodon profile for example:

[M-DinhHoangViet]

Ex: My profile on Chess.com

[awestm]

Hey all,

Have a prototype built locally, would love to get some feedback on it. Not the biggest expert in css so I'm sure it could be made far simpler. Also, "List" would not be my preferred name but there's currently no appropriate translation in the translations object so I made do with that one for the time being.

Would love to get another pair of eyes on it, have a gif below of what it would look like. Tried to copy the existing format used in the upper bar. Let me know!

[awestm]

Draft PR at: #14205

Changed up the look of it so that it feels more mobile friendly. Not sure if there should be a different look for mobile vs desktop.