# Notification menu - unnecessary white space

**URL:** https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810
**Category:** UX
**Created:** [8월 15, 2018, 6:53오후 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810 "2018-08-15T18:53:09Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [8월 15, 2018, 6:53오후 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/1 "2018-08-15T18:53:09Z")

</div>

There is a UI bug in which there is unnecessary white space under the log out button/bottom of the notification menu. When you close it and open it again then it goes away, so it appears this happens on the inital request.

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/6/46090b86ec594540193a54fe1e4d32e8b9f68a20.png)

**Opening the menu a second time it goes away:**

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/8/b84b90c6193e29d7168c315d5bfceb33ea4c4456.png)

_latest version of chrome on windows_

---

<div class="post-metadata">

### Author: ![omarfilip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omarfilip/32/208019_2.png) [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [8월 15, 2018, 10:24오후 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/2 "2018-08-15T22:24:20Z")

</div>

I can repro in Chrome on Mac.

---

<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: [8월 15, 2018, 11:51오후 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/3 "2018-08-15T23:51:56Z")

</div>

It depends on the length of the topic titles in your drop-down menu.

---

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [8월 16, 2018, 12:18오전 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/4 "2018-08-16T00:18:30Z")

</div>

That still shouldn’t create a block of empty space. If the title length of a topic is too long then it continues onto the next line, but this shouldn’t create space outside of the notifications list.

---

<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: [8월 16, 2018, 1:26오전 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/5 "2018-08-16T01:26:08Z")

</div>

If you find it bothersome, feel free to submit a fix.

---

<div class="post-metadata">

### Author: ![nexo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nexo/32/106384_2.png) [@nexo](https://meta.discourse.org/u/nexo)
#### Post date: [8월 16, 2018, 1:43오전 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/6 "2018-08-16T01:43:19Z")

</div>

I’l try. It appears to be a bug and I was letting the team know first.

---

<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: [8월 16, 2018, 1:44오전 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/7 "2018-08-16T01:44:01Z")

</div>

> [@nexo](#):
>
> I’l try.

Awesome, more than happy with a fix here ☀

---

<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: [8월 16, 2018, 1:45오전 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/8 "2018-08-16T01:45:46Z")

</div>

Fair warning, this is a difficult scenario, as the height has to be calculated dynamically based on the browser height, plus the rendered height of the topic titles, etc… and it’s done in JavaScript.

Looking for 100% perfection here is .. unrealistic, but have at it.

---

<div class="post-metadata">

### Author: ![Bas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bas/32/294929_2.png) [@Bas](https://meta.discourse.org/u/Bas)
#### Post date: [8월 16, 2018, 8:47오전 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/9 "2018-08-16T08:47:34Z")

</div>

> [@codinghorror](#):
>
> and it’s done in JavaScript.

This decision bit us as well, could I ask why you preferred this over a native-CSS solution?

---

<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: [8월 16, 2018, 9:10오전 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/10 "2018-08-16T09:10:28Z")

</div>

The main reason is that we dynamically ask for a certain number of notifications based off the height. Its possible that we could amend our design to be a bit friendlier to abundance of notifications. It would be simpler just to have 50 notifications always and have CSS do its magic if it was possible, some of the new CSS structures may be able to pull this off. cc @awesomerobot

What we want is some CSS magic that displays this on large screens

```plaintext
[1]
[2]
[3]
[4]

```

And this when you size it down:

```plaintext
[1]
[2]
[3]

```

**Without** a scrollbar and **without** half rendered items.

---

<div class="post-metadata">

### Author: ![Bas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bas/32/294929_2.png) [@Bas](https://meta.discourse.org/u/Bas)
#### Post date: [8월 16, 2018, 12:46오후 UTC](https://meta.discourse.org/t/notification-menu-unnecessary-white-space/94810/11 "2018-08-16T12:46:12Z")

</div>

> [@sam](#):
>
> The main reason is that we dynamically ask for a certain number of notifications based off the height.  
> (…)  
> **Without** a scrollbar and **without** half rendered items.

That makes total sense 🙂
