Skip to content

Fix tile selection UI in /tools/check page - selected state not persisting

Problem

The tile selection UI on the /tools/check page has several issues with visual feedback:

  1. Selection not persisting: When clicking on a default avatar tile (retro, robohash, wavatar, etc.), only the text color changes to blue, but the tile background remains white
  2. Selection lost on mouse leave: The selection visual state disappears when moving the mouse away from the selected tile
  3. Inconsistent hover behavior: Hover effects work correctly (blue background), but selection state doesn't maintain the same visual treatment

Expected Behavior

  • Hover: Light blue background with blue text
  • Click/Select: Blue background with white bold text (should persist)
  • Leave selected tile: Should maintain blue background and white bold text
  • Hover over selected tile: Slightly darker blue background, maintaining white bold text

Root Cause

The issue was caused by:

  • CSS specificity conflicts with theme styles
  • Inline JavaScript styles interfering with CSS hover states
  • Missing CSS rules for proper selected state management

Screenshots

The issue was clearly visible where:

  1. Hover worked correctly (blue background)
  2. Click only changed text color (no background change)
  3. Selection was lost when mouse left the tile area

Impact

This affects user experience on the avatar checking tool, making it unclear which default avatar option is currently selected.