feat(game): make some minor ux adjustments

[wescopeland]

This PR makes a handful of tiny adjustments to the game page UX. The majority of these are targeted at mobile, though some impact all breakpoints.

---

• If a breadcrumb is going to line break, it is automatically moved to the next line.
• Breadcrumbs now have a slightly increased line-height.

These changes largely only impact mobile.

BEFORE

AFTER

---

• Console names are now separated from game names.

The idea is in a subsequent PR, console icons from #1432 can also be added for design uniformity.

BEFORE

AFTER

---

• Game metadata no longer uses a table layout.

This makes the content much more readable on mobile displays. Desktop is largely unaffected.

BEFORE

AFTER

---

• On mobile, screenshots now span the entire width of the screen rather than having dead margin space on the edges.

BEFORE

AFTER

---

• On mobile, achievement progress bars are now full-width rather than using a hard-coded width which doesn't span the row.
• The copy underneath the progress bars has been slightly tweaked to include number separators (X,XXX) and to change "(N%) players" to "N% earn rate". The percentage has been removed from parens to reduce ambiguity with the hardcore parens number on the previous line of the copy.

BEFORE

AFTER

---

• On mobile, recent comments no longer has a line break on the hyperlink.

BEFORE

AFTER

---

• The game's progress bar now no longer displays if the user has no progress for the game.

It is redundant given the label "You have not earned any achievements for this game" is already on the screen.

BEFORE

AFTER

---

• On mobile, the game progress bar has been relocated to be closer to the achievements and now stretches the full width of the screen.

BEFORE

AFTER

---

• Active claims metadata now additionally displays a relative date for when the claim will expire (or how long ago it was since the active claim expired).

BEFORE

AFTER

---

• If there are no leaderboards for a game, the "why not suggest some" label now links to the game's forum topic.

BEFORE

AFTER

[Soulsderfuchs]

I have an issue with

On desktop, game screenshots fill their divs and have an extremely subtle 4px corner radius.

and this is a retroactive issue and not on newer screenshots after this change. The fact is these screenshots are bad ratio because they are bad screenshots that need replacing, This change would not only obfuscate the screenshots that are in clear need of replacing inturn leting them stay that way longer but also would make them look even worse when trying to upscale them to their proper counterparts that are correctly scaled.

So I think this change is bad for the overall quality of the site as is and would make the site clean up job harder.

A suggestion I could think of would be that newer screenshot uploads would downsize to a div size properly and every scheenshot thereafter would stay consistent, but retroactively leaving the bad size images alone so they are clearly visable as sign to fix them.

[wescopeland]

The fact is these screenshots are bad ratio because they are bad screenshots that need replacing, This change would not only obfuscate the screenshots that are in clear need of replacing inturn leting them stay that way longer but also would make them look even worse when trying to upscale them to their proper counterparts that are correctly scaled.

Thank you for your feedback. I understand your concerns about the impact of this change on the overall quality of the site.

Regarding the bad ratio of some screenshots, I agree that they need to be replaced. How do you detect bad screenshots currently? Visual observation?

I think this change is bad for the overall quality of the site

The argument I'm reading is this:

is better than this:

I don't think these particular reservations should prevent us from improving the overall design consistency of the site. My perception is while this change could raise the floor for how hard it is to detect bad-ratio screenshots for the purposes of site cleanup, it also raises the floor of UX for that section to everyday users.

If there is currently no good way to detect bad-ratio screenshots, we should discuss building that and adding validation for newly uploaded screenshots in a separate issue. I would be more than happy to help out with this.

Edit: I have started a discussion for this here.

[wescopeland]

Had a good discussion with @Soulsderfuchs here. The plan is to rip out the image scaling changes from this PR and open a separate PR for validating those game images. The scaling changes will be included in that PR.

[Soulsderfuchs]

Had a good discussion with @Soulsderfuchs here. The plan is to rip out the image scaling changes from this PR and open a separate PR for validating those game images. The scaling changes will be included in that PR.

This sound great!, thank you for the friendly discussion on the matter, this would solve my original issue that I brought up.

[wescopeland]

The image auto-scaling changes for desktop have been removed. They will resurface in a PR which also adds upload validation for those images, per discussion here.

[Jamiras]

Noticed an oddity on the user page:

[wescopeland]

Noticed an oddity on the user page

Great catch, addressed by 9bbc4af.

[Jamiras]

Noticed an oddity on the user page

Great catch, addressed by 9bbc4af.

Still seeing the same behavior.

[wescopeland]

Still seeing the same behavior.

You're right - my mistake. I believe this was a PurgeCSS issue caused by me using string concatenation for a Tailwind classname. I was seeing the problem resolved while in dev mode, but it reappeared after doing a full build.

I've made a more assertive change to resolve the issue in ab861aa.

[Jamiras]

Can't speak to mobile, but desktop seems to be working fine.