About UI hit targets

There's something I've noticed in a number of UIs I have used. I'm not sure if it's really a trend, but it's still a bit of a problem and I would like UIs to be better. It concerns the hit targets of smaller UI elements when on top of larger ones.

Let's take this piece of BlueSky's UI as an example.

This is the bar at the bottom of each post that allows for a variety of interactions. Naturally each of these icons has a hit box to allow clicking on it. With a small use of the inspector we can make the hit boxes visible:

So far, so good. The problem occurs when you do not click within these hit boxes. Because even though this entire bar is made to hold the buttons for post interactions, the entire bar is still part of the main post UI element. Which has an on-click event to navigate to the full thread of the post! Because of this, if you miss the hit box of any of these buttons by even a pixel, you will now navigate away from where you were - something that you are not likely to want if you were clicking around in the bar with these icons.

This results in - IMO - a bad user experience, as not clicking on-target punishes the user by performing an action wildly different from what they intended to do, and that requires extra interaction to correct: navigating back, finding the location of the original post on the screen again, and possibly even needing to scroll to the right position.

The annoying thing of seeing this is that it is incredibly easy to avoid: Just make sure that the block in which such buttons are embedded is a non-interactive element. This way, a misclick simply does nothing, and easily allows the user to reposition and correct the click.

This is certainly not limited to BlueSky, I noticed this myself in a number of different UIs. I hope that it's possible to create some awareness of this to help UIs become just a bit better!