User cards don't avoid the header

UX
1

…and this is definitely important given sticky avatars are a thing. The case in this photo is likely to be quite common and yet the user card is buried behind the banner:

image
image1004×528 50.4 KB

Either making it float on top or, preferably, starting below the header would help to prevent this once-rare-but-now-common scenario from impacting users.

4 Likes
2

Hi,

It seems to me there are actually two different issues here.

  1. As you mention, if an article is too close to the header when the user-card is shown, the card will be covered by the header.
    This seems to be related to the way the offset is calculated when the user-card element is displayed. I think _positionCard (in /app/mixins/card-contents-base.js ) is what determines this when the _showCardOnClick method is called. There’s a _calculateTopOffset method, but it makes no reference to the header just #main_outlet or html. It seems to me that when the user-card is shown on the desktop, it should look for the header and use that as it’s top. However… it’s a bit more complicated because…
  2. This behavior is different between mobile and desktop sites…
    On a mobile device, when a user-card is displayed, it is positioned at the top of the page and in what seems to be a full-page modal. When you click anywhere on the page and try to scroll, the card is hidden and the modal destroyed. The same thing happens on the desktop if you click outside the user-card. However…on the desktop…you can scroll without clicking anywhere and the user-card will remain visible, ending up behind the header if you scroll that far.

So in addition to making sure the user-card respects the header on the desktop, I think it would be good if the behavior were the same across devices so that once you click outside the card, or try to scroll, the card is hidden again. What do you think about that?

2 Likes
3

That seems reasonable, but I unfortunately have neither the time nor experience to really make that commit on my own.

Hopefully somebody can tackle it once they get the time - definitely not a high-priority fix, but would be nice for the professionalism of Discourse sites in general.

4

I just tested and this looks fixed to me. I agree with sticky avatars this is an important fix!