[Bug]: No description available for Performance Badge on user profile

[yamgomes]

Describe the bug

The performance badges on the report cards just say "No description available"

To Reproduce

Steps to reproduce the behavior:

1. Open someone's user profile
2. Mouse over the "Perfect"/"Great"/"Poor"/etc. badge

Expected behavior

Should say the description, like "Plays, but FPS is in the single digits" for "Poor"

Screenshots / Logs

Environment (please complete the following information):

• OS: Windows
• Browser: Vivaldi (Chromium based)

Checklist

• I have checked that this issue has not already been reported
• I have checked that this issue exists on the production version
• I have provided sufficient information for reproduction
• I am willing to help investigate or fix this issue if needed

Solution, maybe?

src/app/users/[id]/UserProfilePage.tsx on line 408 the PerformanceBadge does not receive the description prop. I would guess that it just needs a description={listing.performance?.description} since every other use of the component does this but inspecting the network tab the listing description is not returned from the API (I don't know Prisma enough to know if this is intended behavior or something else would need to be adjusted).

[Producdevity]

Thanks for reporting this and for actually digging into the cause. I remember looking at this before. The missing description prop might look related, but even if it were present it would not fix the underlying issue.

The Tooltip component is a slightly modified version from shadcn and it is strictly hover based.

I am open to suggestions on how this should work from a mobile UX perspective. Since there is no hover on touch devices, using taps becomes tricky. This Tooltip is used across many cards, table rows, buttons, etc, and on mobile it does not feel right to require more precise interactions on already small UI elements.

[yamgomes]

I think this specific issue is about a missing prop and the hover interaction. Since mobile doesn’t really have hover (and long-press would feel awkward here), I think it’s fine if this is solved only for desktop.

My opinion on mobile UX:

For this screen, I don’t see a good way to support this interaction on mobile without compromising both mobile and desktop UX. The badges are too small to be clickable and increasing their size would take too much space, so I think mobile should simply “lose” this feature on this card component.

However, once the user opens a listing, there should be a clear way to see this information. That could be done either by displaying the description directly or adding an explicit info button.

For the listings page, I think reusing the badges for the "listing info" section (the area between the game name and the Notes section) helps consistency, but it also makes the UX worse because the label (System, Device, Emulator) is embedded inside the badge itself.

My suggestion would be to switch that section to a:

Label: (new line)
Information

layout — similar to Emulator-Specific Details, but without the borders. Then it would be possible to:

• add a magnifying glass icon to clearly indicate that the item is clickable,
• make the “Device specs” link a distinct button,
• allow Performance to finally have a visible label (it’s currently the only unlabeled field),
• make it easier to show the description either inline or via an info button (modal or accordion).

An alternative (simpler) option is to change the text inside the badges for icons and underlining the text to make it clear they're clickable (an icon AND a magnifying glass might make it too cluttered).

Lucide doesn’t seem to have great fits, but a quick search on The Noun Project turned up some icons that could work well. No matter the pack,

• SNES controller for System
• Phone + controller for Device
• Space-Invaders alien (RetroArch icon) for Emulator
• Speedometer for Performance

If any of this sounds reasonable, I’m happy to mock it up or even implement it (it looks like mostly HTML/CSS).