co-design icon indicating copy to clipboard operation
co-design copied to clipboard

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

Open cellio opened this issue 1 year ago • 2 comments

meta: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.

cellio avatar Sep 02 '24 00:09 cellio

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).

celtschk avatar Sep 02 '24 19:09 celtschk

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

ArtOfCode- avatar Sep 07 '24 15:09 ArtOfCode-