Forum: too large clickable area in topic titles leads to misclicks

I have several times noticed that when I have clicked a topic with mouse, I have actually opened the next topic instead. Today I looked more closely which link the mouse hover action promises to lead me onto in which part of the topic list area... And it looks like the overlapping clickable area creates difficulties, as the area clearly overlaps the line separating the two topics and can lead to surprises.

The below picture tries to explain my observations. I have colorized each topic's clickable area:

Key observations on the clickable area:

  • Vertically the clickable area is quite much larger than the area between title's "top line" and "bottom line".
  • The next topic's area overlaps the area of the previous topic and the topic's area will then cover the current one, which in practice moves the clickable area upwards (as the next one starts right at the bottom of the topic text).
  • Horizontally the area is pretty closely limited to the length of the topic itself. Different topic lengths create surprises when combined to the vertical overlap logic.

It would be much better to somewhat limit the vertical clickable space of a topic. It should match the visible area between lines more closely.

I tested with both Firefox 51 and IE win Windows 10, (4K display with some DPI scaling, but that shouldn't create this effect.)

Issue confirmed here on a normal fullHD screen, both latest FF and Chromium.

if I click a few mm under a title's text I'm actually clicking on the title below it.

Is it possible to introduce some margins between the topics in the list? It might solve the overlapping clicking area and I personally don't like the current list density, maybe it's my ADD but I find it hard to focus. :wink:

Fixed. Please mention @jow if you encounter CSS issues so I can fix them asap.

1 Like

Thanks @jow. Much better now.

And good to know that you are the CSS guru here :wink: