# Misaligned Envelope in New PM notification icon

**URL:** https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252
**Category:** UX
**Tags:** notifications
**Created:** [March 13, 2024, 11:56pm UTC](https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252 "2024-03-13T23:56:38Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![HamMan2118](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hamman2118/32/383565_2.png) [@HamMan2118](https://meta.discourse.org/u/HamMan2118)
#### Post date: [March 13, 2024, 11:56pm UTC](https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252/1 "2024-03-13T23:56:38Z")

</div>

Good evening!

Noticed when I receive a PM on another forum that the 📧 icon is off center from the green background, slightly off to the right.  
 ![image](https://global.discourse-cdn.com/meta/original/4X/3/7/8/3786a031cf0522a6cdbec4fac6416e3e5e952b37.png)

To ensure this was not specific to one forum, I tested it here too. Only this one is slightly off center to the left 😝

 ![IMG_3699](https://global.discourse-cdn.com/meta/original/4X/2/3/c/23c3e1b835c619ae0d374359b65b4a48841a99c7.jpeg)

To repro:  
1.) Send yourself (or receive) a PM  
2.) notice the notification icon, with the envelope off-center.

This isn’t a very important issue but now I cannot unsee it 🙃

---

<div class="post-metadata">

### Author: ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [March 14, 2024, 12:01am UTC](https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252/2 "2024-03-14T00:01:40Z")

</div>

Just PM’d you here, can you reproduce it here on Meta? Also, what browser/device combo are you seeing this on?

---

<div class="post-metadata">

### Author: ![HamMan2118](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hamman2118/32/383565_2.png) [@HamMan2118](https://meta.discourse.org/u/HamMan2118)
#### Post date: [March 14, 2024, 12:02am UTC](https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252/3 "2024-03-14T00:02:56Z")

</div>

Hello,

Yes, I tested here on meta as stated on the report:

> [@HamMan2118](#):
>
> To ensure this was not specific to one forum, I tested it here too. Only this one is slightly off center to the left 😝
> 
> ![IMG_3699](https://global.discourse-cdn.com/meta/original/4X/2/3/c/23c3e1b835c619ae0d374359b65b4a48841a99c7.jpeg)

REproed on Chrome, version 122.0.6261.69, as well as on iPhone 13 Pro running Safari.

---

<div class="post-metadata">

### Author: ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [March 14, 2024, 12:03am UTC](https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252/4 "2024-03-14T00:03:18Z")

</div>

Can’t reproduce, Chrome, Android 13, Samsung Galaxy A23

 ![Screenshot_20240313_190229_Chrome](https://global.discourse-cdn.com/meta/original/4X/8/7/9/879c4ec83f2d35d16dc1a5b95682f44b188465b1.jpeg)

---

<div class="post-metadata">

### Author: ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [March 14, 2024, 12:03am UTC](https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252/5 "2024-03-14T00:03:55Z")

</div>

Is it perhaps specific to one theme? If you change to a different one, does it still occur?

---

<div class="post-metadata">

### Author: ![HamMan2118](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hamman2118/32/383565_2.png) [@HamMan2118](https://meta.discourse.org/u/HamMan2118)
#### Post date: [March 14, 2024, 12:08am UTC](https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252/6 "2024-03-14T00:08:57Z")

</div>

Results on different themes:

- Meta Branded:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/9/7/d/97de8a5fa1d76f00cd972ad6780de5b97af3ee6a.png)
- Central:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/3/b/e/3be0c2179e7e11c055ab8deb617e6ccdd20dbadc.png)
- Default:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/7/9/6/7962285157e1007403450021af67b92f424c2e56.png)

Seems to be the case on all of the theme with the 📧 as the icon for unread messages.

Could potentially see if others can repro as well.

---

<div class="post-metadata">

### Author: ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [March 14, 2024, 12:34am UTC](https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252/7 "2024-03-14T00:34:29Z")

</div>

My personal testing results:

1. Regardless of theme I try on my phone, it is correctly aligned
2. PC results:  
2.1. Accessible Contrast dark:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/9/9/2/9923b1a2259e4b8214d17a25f91b3d49f4ced821.png)  
2.2. Air Theme:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/6/0/b/60bd7acf67d14ce99d97acb2767067e6c6694c7c.png)  
2.3. Central:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/6/a/e/6aeaf2500dd0780a232f5714607f7c39cb4db4e3.png)  
2.4. Dark:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/3/d/5/3d5237fa85315bba2ceb2ff8f17f6dcf1fe608d9.png)  
2.5. Default:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/d/1/f/d1f6f0e65b03d62fbea64ffdac24fe986420f498.png)  
2.6. Default (full-width):  
 ![image](https://global.discourse-cdn.com/meta/original/4X/6/5/5/655c2114098cee73fcb5de0c0137ffe158adce25.png)  
2.7. Discourse Classic:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/9/4/f/94f420473276722cc92ff2a2b864945bac0afc59.png)  
2.8. Fully:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/f/e/6/fe634c55c439ca5ef030897f824e14d0c36ad993.png)  
2.9. Ghost:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/2/d/9/2d9de3aa2c20b2557a510fca863317d386e1436b.png)  
2.10. Graceful:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/1/f/5/1f5ad4ce5a0c1110355d8f2b75573dd020ae21e2.png)  
2.11. Grey Amber:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/4/4/8/4486533ff203ed01fcad2e87d203ccf8d0fd9003.png)  
2.12. Material Design:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/b/2/2/b229ccac83b43aaea26afd3fcbbac85aaeb080de.png)  
2.13. Meta Branded:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/2/a/5/2a58fdb7d58840266ece65c66cff3de193f630ee.png)  
2.14. Minima Dark:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/e/2/3/e239dcf3f8432ac431f19ec279f76c7c1b7cbb97.png)  
2.15. Redditish:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/b/8/6/b8658ff71eb302fe910a1a228f7f39474ab7d211.png)  
2.16. Sam’s Simple Theme:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/7/1/7/717aaf72bbf2e2a73594f5321ef8e41e55ec0360.png)
3. If I adjust the width of the svg from 1em to 1.1em (manual CSS tweak), it _looks_ centered on my PC:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/5/9/8/598bda77a605ca38a8c1cf902fe0abfa5ac545c3.png)

---

<div class="post-metadata">

### Author: ![HamMan2118](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hamman2118/32/383565_2.png) [@HamMan2118](https://meta.discourse.org/u/HamMan2118)
#### Post date: [March 14, 2024, 12:53am UTC](https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252/8 "2024-03-14T00:53:29Z")

</div>

Odd. I’ll do some further investigation later!

---

<div class="post-metadata">

### Author: ![HamMan2118](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hamman2118/32/383565_2.png) [@HamMan2118](https://meta.discourse.org/u/HamMan2118)
#### Post date: [March 14, 2024, 2:40pm UTC](https://meta.discourse.org/t/misaligned-envelope-in-new-pm-notification-icon/299252/11 "2024-03-14T14:40:59Z")

</div>

Ok, I tested on two other discourse communities that I am a part in. Here are the results.

- [devsupport.flightsimulator.com](http://devsupport.flightsimulator.com)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/d/7/9/d795a6d8cc97bf771137bcc54594187019b8cd01.png)
- [forums.goatsimulator3.com](http://forums.goatsimulator3.com)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/6/9/c/69c89f239423c3a62bffe79581e19675115c8034.png)

DevSupport uses the default Dark theme while the Goat Sim 3 forum uses a special theme. Both tested on iPhone 13 Pro, this time on Chrome for iOS.

So, it seems that default color scemes are causing this issue? Not sure though why @Firepup650 you cannot repro 🤔

EDIT: Tested to see if the profile picture made a difference on goat sim 3 forum. Nope