# User card overflows outside of window

**URL:** https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274
**Category:** Bug
**Created:** [16 Febbraio 2015, 1:17am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274 "2015-02-16T01:17:38Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![chapel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapel/32/122414_2.png) [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [16 Febbraio 2015, 1:17am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/1 "2015-02-16T01:17:39Z")

</div>

[![](https://global.discourse-cdn.com/meta/original/3X/7/c/7c8f61ad721771da293172040ff2cb7b8d06e5d8.png) ](https://dl.dropboxusercontent.com/s/zy7hi4ql7fh4uo8/Screenshot%202015-02-15%2017.08.37.png?dl=0)

I’ve tracked down the change that causes the issue, not sure why it was changed here:

[https://github.com/discourse/discourse/commit/246f77c98d48df011a2e80ae5d33bee1104b6366](https://github.com/discourse/discourse/commit/246f77c98d48df011a2e80ae5d33bee1104b6366)

I tested it on my install, reverting the above change, using the `overage` variable like it was before, causes the user card to display properly.

My question for @sam is why change it?

PR for fix:  
[https://github.com/discourse/discourse/pull/3205](https://github.com/discourse/discourse/pull/3205)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [16 Febbraio 2015, 1:19am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/2 "2015-02-16T01:19:14Z")

</div>

It was rendering offscreen in certain browser widths afaik.

---

<div class="post-metadata">

### Author: ![chapel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapel/32/122414_2.png) [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [16 Febbraio 2015, 1:20am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/3 "2015-02-16T01:20:40Z")

</div>

That makes sense, as to why the original solution wouldn’t work. Though what you changed it to definitely didn’t fix the issue.

Do you know what browsers it was having trouble with? I can modify my fix to accommodate those browsers.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [16 Febbraio 2015, 1:24am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/4 "2015-02-16T01:24:46Z")

</div>

Can you test this on a site with a custome header like [https://discuss.howtogeek.com/](https://discuss.howtogeek.com/) at various widths. I think chrome exhibited the issue at very particular widths.

---

<div class="post-metadata">

### Author: ![chapel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapel/32/122414_2.png) [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [16 Febbraio 2015, 1:38am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/5 "2015-02-16T01:38:05Z")

</div>

Current behavior  
[![](https://global.discourse-cdn.com/meta/original/4X/e/4/7/e47d8ee6138087f093e2d745f22a6ac066d755c3.png) ](https://dl.dropboxusercontent.com/s/3v8vjrb0bd1p7rh/Screenshot%202015-02-15%2017.36.19.png?dl=0)

Using overage  
[![](https://global.discourse-cdn.com/meta/original/4X/4/7/8/47832e26219da73bebf46dd43fd0f9b326c9efaa.png) ](https://dl.dropboxusercontent.com/s/4x5nt2cdanjoac4/Screenshot%202015-02-15%2017.35.47.png?dl=0)

Window width: 854px (was lowest width to have multiple users in users column)

---

<div class="post-metadata">

### Author: ![chapel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapel/32/122414_2.png) [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [16 Febbraio 2015, 1:41am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/6 "2015-02-16T01:41:04Z")

</div>

I also tested in Firefox and Safari and the behavior was consistent, for what it’s worth.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [16 Febbraio 2015, 1:41am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/7 "2015-02-16T01:41:55Z")

</div>

I will pull this in and keep an eye on it, thanks!

---

<div class="post-metadata">

### Author: ![chapel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapel/32/122414_2.png) [@chapel](https://meta.discourse.org/u/chapel)
#### Post date: [16 Febbraio 2015, 1:44am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/8 "2015-02-16T01:44:22Z")

</div>

As an FYI, I found the issue after adding the user card markup to the last poster info on my version of the minimal theme. Since the last poster is on the far right, it was always going over the edge.

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [16 Febbraio 2015, 1:46am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/9 "2015-02-16T01:46:02Z")

</div>

Wow - damn - there’s a bloody big picture of me.

That was unexpected!

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [16 Febbraio 2015, 1:51am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/10 "2015-02-16T01:51:01Z")

</div>

![](https://global.discourse-cdn.com/meta/original/3X/8/6/8615b9e4f2241097345cdf316e8c7de3dea1cf06.jpg) 

Reminds me of the poster I have in my bedroom 😙

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [16 Febbraio 2015, 1:57am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/11 "2015-02-16T01:57:31Z")

</div>

Here’s one of @codinghorror and @sam talking

 ![](https://global.discourse-cdn.com/meta/original/3X/1/8/181b82bd2556ad9a9e890bb07a8d6b309f09a3c1.jpg)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [16 Febbraio 2015, 2:42am UTC](https://meta.discourse.org/t/user-card-overflows-outside-of-window/25274/12 "2015-02-16T02:42:58Z")

</div>

This topic was automatically closed after 61 minutes. New replies are no longer allowed.
