Clickable elements in Project sidebar are easy to "mis click"

[ewdurbin]

Describe the bug

Project URLs in the sidebar on pages like https://pypi.org/project/django-polymorphic/ are difficult to click due to overlapping hit boxes.

For instance, when cursoring up through the list attempting to click "Homepage" here, I accidentally hit "Download":

Additionally, non clickable things like "License" and tags act as clickable when scrolling over them:

Expected behavior

Links should be easy to click, things that are not links should not behave as links.

To Reproduce

Navigate to a project page and trial/inspect the elements to see how cursor behaves and which link is active.

My Platform

Noticed on Safari 18.0 on MacOS 15.0.

Additional context

May be related to #15737 or #16532.

[di]

Looks like the "clickable"-ness is due to the span having the vertical-tabs__tab and vertical-tabs__tab--condensed classes, and the parent ul having the vertical-tabs__list class. Removing these will reintroduce the bullets as well, so we would need to suppress them to maintain the same view.

The spacing seems to be due to

warehouse/warehouse/static/sass/blocks/_verified.scss

Line 28 in f3dcfcc

display: inline;

which is overridding:

warehouse/warehouse/static/sass/blocks/_vertical-tabs.scss

Line 107 in f3dcfcc

display: block;

However this was done so the checkboxes display inline with the link, so an alternative method to do that will need to be found.

[di]

Also, it was noted that the checkmarks may be redundant given they are already within a "verified" section, so perhaps it makes the most sense to remove them.

[ewdurbin]

I'm pretty sure the spacing/hitbox issue is just the removal of definite padding on a elements in #16532 and I can't understand why that occurred.

[di]

Here's what it looks like with display: inline removed and the checkboxes removed:

Seems like that's approximately what it originally looked like?

[di]

Here's what it looked like 4 years ago: https://web.archive.org/web/20200919103428/https://pypi.org/project/pytest-socket/

[ofek]

I'm in favor of removing the checkmarks since the entire section is under the verified header. I missed the documentation link and had to ask what the checkmarks meant because of them.