search

dvmarinoff / Flux

Indoor Cycling App for Structured Training
https://flux-web.vercel.app
GNU Affero General Public License v3.0
541 stars 92 forks source link

Prevent text selection on buttons #163

Closed marfire closed 11 months ago

marfire commented 12 months ago

When using the app on a tablet (Android, using Chrome) almost every button press results in the button text being selected, causing Chrome to pop up annoying user interface elements ("copy", "web search", etc.) that then have to be cleared away. It's very distracting, especially when you're trying to ride.

I believe that UX best practice is for button text to not be selectable. In fact, I see that is part of some default styles in your css file (.btn has user-select: none). Perhaps this is as simple as adding that to your .flat-btn, though I'm not familiar enough with the css here to be sure.

Thank you for creating this cool application.

dvmarinoff commented 12 months ago

Hey, thanks for the report!

I moved the user-select: none declarations to the body element. I thought this issue was fixed some time ago, at least I wasn't seeing it on my device (Samsung S9 + Chrome). I hope this would be better now. Let me know if some buttons are misbehaving again.

marfire commented 11 months ago

Thanks for the quick response. This works for me, though in general you do want text to be selectable, just not on components that the user interacts with (e.g. buttons). In this particular app, though, there's hardly a use case for selecting any of the text, so putting it on body might be fine.