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

**URL:** https://meta.discourse.org/t/layout-issue-when-you-click-on-mention-within-a-user-card/82121
**Category:** UX
**Tags:** user-card
**Created:** [March 3, 2018, 2:45pm UTC](https://meta.discourse.org/t/layout-issue-when-you-click-on-mention-within-a-user-card/82121 "2018-03-03T14:45:38Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [March 3, 2018, 2:45pm UTC](https://meta.discourse.org/t/layout-issue-when-you-click-on-mention-within-a-user-card/82121/1 "2018-03-03T14:45:38Z")

</div>

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:

 ![loved-by-zogstrip](https://global.discourse-cdn.com/meta/original/3X/d/3/d3dabda97a95e057c57c1560074ed7857887b246.png)

 ![poor-zogstrip](https://global.discourse-cdn.com/meta/original/3X/f/b/fbdda477b73763125656c4766acf8de4df6d9b8d.png)

---

<div class="post-metadata">

### Author: ![JonnyGamer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonnygamer/32/73086_2.png) [@JonnyGamer](https://meta.discourse.org/u/JonnyGamer)
#### Post date: [March 3, 2018, 2:53pm UTC](https://meta.discourse.org/t/layout-issue-when-you-click-on-mention-within-a-user-card/82121/2 "2018-03-03T14:53:07Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [March 3, 2018, 3:01pm UTC](https://meta.discourse.org/t/layout-issue-when-you-click-on-mention-within-a-user-card/82121/3 "2018-03-03T15:01:50Z")

</div>

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

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

 ![usercard](https://global.discourse-cdn.com/meta/original/3X/7/c/7c7edba5652cedf75cf12cd5c9ad483fa2bed45a.png)

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`

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [March 5, 2018, 6:00pm UTC](https://meta.discourse.org/t/layout-issue-when-you-click-on-mention-within-a-user-card/82121/4 "2018-03-05T18:00:38Z")

</div>

Something for @awesomerobot perhaps?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 6, 2018, 5:45am UTC](https://meta.discourse.org/t/layout-issue-when-you-click-on-mention-within-a-user-card/82121/5 "2018-03-06T05:45:42Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![notriddle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/notriddle/32/133055_2.png) [@notriddle](https://meta.discourse.org/u/notriddle)
#### Post date: [March 6, 2018, 2:10pm UTC](https://meta.discourse.org/t/layout-issue-when-you-click-on-mention-within-a-user-card/82121/6 "2018-03-06T14:10:16Z")

</div>

> [@awesomerobot](#):
>
> 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, the card would always show above the header/title/nav, etc

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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 6, 2018, 3:35pm UTC](https://meta.discourse.org/t/layout-issue-when-you-click-on-mention-within-a-user-card/82121/7 "2018-03-06T15:35:54Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [March 6, 2018, 3:41pm UTC](https://meta.discourse.org/t/layout-issue-when-you-click-on-mention-within-a-user-card/82121/8 "2018-03-06T15:41:45Z")

</div>

> [@awesomerobot](#):
>
> Not sure which is easiest here.

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