Problem
On mobile devices the donor card experience breaks in several ways:
- Badge tooltips (donor name + amount on hover) don't work on touch — there is no hover on mobile
- The card image is small and badge details are hard to see
- The overlay badge interaction relies on mouse events that don't translate to touch
Proposed fixes
- Replace hover tooltips with tap-to-show on mobile (detect touch device)
- Consider a "donor list" view below the card on mobile as a fallback — since badges are too small to interact with on a small screen
- Ensure the interests table (Show declared interests) is the primary fallback for mobile users
Notes
- The interests table already works on mobile as a fallback
- The card itself renders fine visually — it's the interactive badge layer that breaks
- Could use
window.matchMedia('(hover: none)') to detect touch devices
Problem
On mobile devices the donor card experience breaks in several ways:
Proposed fixes
Notes
window.matchMedia('(hover: none)')to detect touch devices