style(list): highlighted area of items is not entirely clickable #3172

Description

That is, nothing happens if you click the area outside of the blue rectangle (see the screenshot), which makes it seem like it's just not working.

What I would suggest as a fix is to set position: absolute; top: 0; bottom: 0; right: 0; left: 0; for the <a element such that it fills the wrapper element, and put the other buttons below it in HTML such that they're above it clickable-wise.
Or look up a solution somewhere else, there's plenty of similar code written.

Vikunja Frontend Version

f4c568e961

Vikunja API Version

v1

Browser and version

Gecko 110

Can you reproduce the bug on the Vikunja demo site?

Yes

Screenshots

image.png

5.2 KiB

Fixed in fe764a46e9. Please check with the next unstable build (~30 min) if the problem went away.

I'm afraid it's not ok to put buttons inside <as.

The alternative would be to use a div and attach a click handler to it so that the user will be redirected to the task detail page on click. That would work but would loose all meaning of a link which this is. I feel like the position hack you suggested might work but may create other problems.

Not sure what to do instead? @dpschen do you have an idea?

The suggested solution from @WofWca goes in a good direction.
See also https://css-tricks.com/block-links-the-search-for-a-perfect-solution/

PR is up: #3176