Fix fallback badges in card grids

[engelben]

Motivation

• Compact fallback badges (data/price/image/custom-image) were overflowing card grids for non-English cards that use fallback sources and broke layout.
• Provide a compact, predictable visual indicator in tight card UIs while keeping full details discoverable and accessible.

Description

• Replace the stacked compact fallback badges in FallbackBadges.jsx with a single small flag icon (using Flag from lucide-react) when compact is true.
• Expose the localized fallback-source details as a hover/focus tooltip and provide an accessible combined label via aria-label and tabIndex.
• Preserve the original detailed badge presentation for non-compact contexts and keep visual/tone styling for data, price, image, and customImage badges unchanged.
• Simplify the compact vs non-compact base class handling to avoid cramped small-badge rendering.

I considered other options to flag the fallback, such as highlighting the card frame, but found this the least intrusive. Open to alternatives of course. Right now no colors are used in the tt - can be added back of course.

Current behavior:

Compact behavior with this PR:

[Git-Romer]

Thanks, @engelben, for addressing the fallback-label overflow. After testing the shared component across every affected view, I would like to propose a broader version of the change.

The tooltip approach creates clipping and interaction problems inside clickable card grids. I prepared an alternative that reuses the existing compact badge style and legend system:

• Groups data, price, and image fallback sources into one compact indicator.
• Shows the source language without repeating large text labels.
• Explains every indicator through an expandable badge legend.
• Keeps full fallback descriptions inside the card popup.
• Removes the unnecessary manual-image indicator.
• Avoids custom tooltips, additional keyboard stops, and touch-only interaction problems.
• Uses the same presentation across Pokédex species cards, Set Detail, Collection, another user’s collection, and Wishlist.
• Moves Collection variants, quantities, and fallback indicators onto the card artwork and removes redundant language labels.
• Makes owned Pokédex cards clearer with a green outline while dimming cards that are not owned.
• Uses icon-only legend buttons on mobile and places them alongside the relevant page controls.
• Corrects the mobile card-popup metadata layout, including the rarity label.

I tested the alternative across desktop and mobile with real card data and different ownership, variant, quantity, wishlist, and fallback combinations. The frontend tests and production build pass without layout overflow or runtime errors.

Screenshots

Pokédex species

Set Detail

My Collection

Another user’s collection

Wishlist

Card popup

If you are happy with this direction or have some further ideas, I can update the PR with this implementation. Thanks again for starting the fix!

[engelben]

The overlay is far more elegant, I prefer it! The only concern is how much information we overlay on the cards. My only thought here is that maybe the fallback information is not something most users really care too much about. So a more discrete way of presenting the information is maybe sufficient. Card border highlighting is discrete and maybe an alternative...

This raises a parallel issue I have started to feel increasingly. I feel the inconsistency between the views on how cards are presented is a bit jarring. The overlays work very well in the set/card search/collection views. The wishlist and pkedex version with the frame and text beneath is less so, because information is presented in multiple places and ways. The same applies to the card modals. I have a branch on my fork where I was trying to create a unified card modal for all views, but it is still very much a "Spielwiese"... Also been playing with list view for cards vs the grid view... Separate but related ;)