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