Interactive Hit Areas

Separate the hit area (where pointer events land) from the visual area (what the user sees). Bugs happen when spacing is built so that the gap between items has no event handler — the pointer falls into a dead zone and hover/click does nothing or flickers.

The core rule

Visual spacing between interactive siblings must live INSIDE each hit target, never BETWEEN them.

• WRONG: spacing via gap, space-x, or margin between the interactive elements. The space is empty DOM — no handler — so it's dead.
• RIGHT: interactive elements sit flush (no gap), each filling its full slot and carrying the handler; the visual element inside is made narrower/inset (padding, max-width, or a centered child) so it still looks spaced.

Result: the entire region is a continuous strip of live targets, but it looks identical to the spaced design.

Symptom & detection

• Symptom: moving the pointer slowly between two items, the highlight blinks off in the space between them, or you must aim directly at the small visual element to trigger it.
• Detect: sweep the cursor horizontally/vertically across the whole component. If the active/hover state ever drops out while still inside the component's bounds, you have dead zones.
• The bigger the visual gap, the bigger the dead zone — so "nice airy spacing" makes it worse.