Show "more time" button on smaller screens

[TobTobXX]

Advantages

Well... the gift 15s button is back on the mobile interface, which is IMHO a quite important button for casually playing with friends.

Disadvantages:

When the screen is really small, and the name is long enough, this happens: (this is at 320px)

Note that the above name is far longer than most I've encountered (I don't know about the average / 95percentile etc name length), and the screen width is 320px. (Why is this a decent cutoff?) And also a "3:00:00" clock is one of the largest you can have.

Compare that to a more decent version (here on 270px wide!):

For reference, the previous breakpoint to hide this button was 500px.

Possible solutions:

• Introduce another mediaquery for even smaller sizes (only kicks problems down the screen size)
• Truncate name length

Let me know if you'd prefer me to implement one of these options.

References

See also: #12445

[ornicar]

I don't like it, because:

• it will collide with long usernames with titles like CM Kingscrusher-YouTube
• it adds one more clickable element to a UI that is already cluttered
• the purpose of the button is not obvious, and on mobile there is no hover tooltip

If we want it we would need to have some sort of dropdown menu on the mobile UI, listing textual actions such as "add time to the opponent clock". There would probably be more things that would belong in that menu.

[TobTobXX]

• it will collide with long usernames with titles like CM Kingscrusher-YouTube

Well, this is how it would look on my phone: (I don't know how to mock the titles in the UI)

(I think you can see why this issue is annoying me.)

For comparison, here's how it would look on an iPhone 6 (discontinued since 2015):

It only starts to get problematic on screen sizes of the iPhone 5/SE era (discontinued since 2013/2017 respectively).

I do agree, though, that the collision could be handled more gracefully, as mentioned initially.

• it adds one more clickable element to a UI that is already cluttered

The only clickable element in close vicinity is the player name. If you mean just general visual clutter, then yes the dropdown option hides it away better, though making it vastly less discoverable.

• the purpose of the button is not obvious, and on mobile there is no hover tooltip

Yes, this is true. Though, it isn't obivious either that clicking on a username would leave the game (!!) and show the user profile page. Clicking the plus button right next to the clock causes a much less surprising reaction.

---

Additionally, I don't like the dropdown option, since it requires two clicks, and my usual usage pattern of this button is (a) when only little time remains for the opponent (and two clicks might be too late) and (b) I want to click it multiple times to gift 1min, or 2min.
Both uses are a bad fit for a dropdown. However, just putting the button somewhere else makes little sense too, since I'd expect the "add time to clock" button to be near the opponents clock.

If you terminally insist on stowing it away in a dropdown, I'll jump through the hoops to implement it, as it has caused a premature end to too many games with my friends I'd have liked to finish.

[ornicar]

Here's what I see on a 320px screen (the min we aim to support):

The display is already broken, as there's no room to show the player rating.

With 375px we can show the rating, but still no room for an extra button:

420px looks safe to add it so I'll just do that:

[TobTobXX]

Well, ok. At least that solves it on my phone, so I'll shut up about that issue. Not the solution I'd have liked, but a compromise I can live with.

Thank you!