Symptom

The avatar icon in the corner of the app showed a square background color change on hover, making it look like a plain button rather than an icon.

Root cause

Avatar.kt used a plain .clickable { … } modifier on its Box. Compose’s default clickable provides a LocalIndication ripple/hover highlight which renders as a filled square — visually wrong for a circular icon.

Fix

Replaced .clickable { … } with .clickable(interactionSource = remember { MutableInteractionSource() }, indication = null, onClick = { … }). The indication = null suppresses the default hover/ripple highlight entirely.

Prevention

• Any icon-shaped clickable target should use indication = null alongside an explicit MutableInteractionSource. Plain .clickable {} is correct only for list rows and other rectangular hit targets where the highlight rectangle is intentional.
• NodeMenu.kt already uses this pattern — check that file when adding new interactive icons.