Bounding box for "sign in" / "sign up" buttons is larger than click zone: looks like you can click and you can't

[cellio]

https://meta.codidact.com/posts/291578

The area around the "sign in" and "sign up" buttons in the header switches the cursor to the hand, implying you can click, but only the button itself is actually clickable. This is confusing.

This ought to be a simple matter of CSS or HTML, but I tried looking at the code and the style sheet and was defeated. The relevant places seem to be app/views/layouts/_header.html.erb and app/assets/stylesheets/application.scss (search for header--item), but I'm not sure what to do from there to find and adjust either the bounds or the click zone, sorry.

[celtschk]

I don't know whether the same class is used elsewhere and the change might break other things, but I think it should be sufficient, if in _header.scss the line

cursor: pointer;

is removed from the styling of .header--item (the actual button is a link, and therefore should change the cursor to a hand anyway).

Note that this is not a tested change (I haven't ever tried to install QPixel; I did check disabling the corresponding CSS line in Firefox using the developer tools, though), just an educated guess. But the change is easy enough (removing one line) that anyone who knows how to run QPixel should be able to easily test it.

In case it wasn't clear, I'm speaking about this snippet:

[....]
    .header--item {
      padding: $header-item-padding-y*$padding-unit $header-item-padding-x*$padding-unit;
      margin: $header-item-margin-y*$margin-unit $header-item-margin-x*$margin-unit;
      cursor: pointer;
      font: inherit;
      color: $header-item-color;
[...]

The line

      cursor: pointer;

should be removed from that code (it's line 64, it the Firefox developer tools are to be trusted).

[ArtOfCode-]

Transferred to co-design as the issue is in CD code not QPixel code