Problem
ResponsePanel.jsx:7-12 — hover-based highlighting (onMouseEnter/onMouseLeave) is the primary interaction for syncing participant highlights with the grid. A click/tap fallback exists via sticky state, but on mobile, mouseenter also fires on tap, creating a double-trigger.
Solution
Use @media (hover: hover) to restrict hover behavior to pointer devices, and rely solely on click/tap on touch devices. Or detect pointer type via pointerType in event handlers.
JTBD context
Monitor stage — bidirectional sync between participant list and grid is key for understanding overlap. Double-triggering makes this unreliable on mobile.
Problem
ResponsePanel.jsx:7-12— hover-based highlighting (onMouseEnter/onMouseLeave) is the primary interaction for syncing participant highlights with the grid. A click/tap fallback exists viastickystate, but on mobile,mouseenteralso fires on tap, creating a double-trigger.Solution
Use
@media (hover: hover)to restrict hover behavior to pointer devices, and rely solely on click/tap on touch devices. Or detect pointer type viapointerTypein event handlers.JTBD context
Monitor stage — bidirectional sync between participant list and grid is key for understanding overlap. Double-triggering makes this unreliable on mobile.