Layout issue when you click on @mention within a user card

Total edge case, but one I came across today. I work closely with one other person, so I added their name to my user card to help folks find them when I’m not available.

But if your user card info includes a @mention of another user, clicking on that username causes their user card to open offscreen. It’s a little worse when the other party doesn’t have a user card background image set.

I updated my profile here to provide an example:

6 Likes

I just noticed this recently as well, it wigs out the page for a moment and the user cards don’t appear.

It’d be cool if the user cards stacked upon themselves, but I guess that could lead to some weird bugs.

1 Like

I could be way off the mark here, so take this with a grain of salt :grin:

Here’s what I see when I click on the mention in your user card on Chrome 64 Win 8.1

I think this occurs because the card is absolutely positioned but in the case of a mention within another user’s card the closest non-statically positioned element is #main and so it defaults to

top: 0; left: 10px;
(inline style)

or top left corner relative to #main

and it’s under the d-header because d-header has a z-index value of 1000

10 Likes

Something for @awesomerobot perhaps?

This ends up being a bit more complex than a CSS fix — we wouldn’t want to raise the card position in the z-index, because then if you open a usercard and scroll without closing it (more common than linking a usercard inside a usercard), the card would always show above the header/title/nav, etc… plus right now it also scrolls you to the top of of topic, which is weird to begin with.

So this will need some additional logic… we should either just open the usercard in place of the usercard it’s being linked from (retaining the position)… or we could just say that all user links inside of a usercard link directly to the user profile page. Not sure which is easiest here.

9 Likes

Why? The header has a z-index of 1000. If the card has a z-index of 200, and the nested card has 201, and the sub-nested card has 202, then you can click cards for quite awhile before it reaches 1000 and breaks the layout.

1 Like

Sure that would be fine, but at the moment the cards aren’t nesting — it’s just opening an orphaned card that doesn’t know where to be positioned (it’s positioned at the top of the topic and the z-index is too low, so it’s hidden behind the header). I suspect that any kind of actual nesting is more complex than we need.

2 Likes

Since this is an edge case, I’d also vote for whatever seems easier to implement and/or maintain.

4 Likes