Misaligned Envelope in New PM notification icon

ux
1

Good evening!

Noticed when I receive a PM on another forum that the :email: icon is off center from the green background, slightly off to the right.
image

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

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 :upside_down_face:

2

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

3

Hello,

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

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

4

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

5

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

1 Like
6

Results on different themes:

  • Meta Branded:
    image
  • Central:
    image
  • Default:
    image

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

Could potentially see if others can repro as well.

7

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
    2.2. Air Theme:
    image
    2.3. Central:
    image
    2.4. Dark:
    image
    2.5. Default:
    image
    2.6. Default (full-width):
    image
    2.7. Discourse Classic:
    image
    2.8. Fully:
    image
    2.9. Ghost:
    image
    2.10. Graceful:
    image
    2.11. Grey Amber:
    image
    2.12. Material Design:
    image
    2.13. Meta Branded:
    image
    2.14. Minima Dark:
    image
    2.15. Redditish:
    image
    2.16. Sam’s Simple Theme:
    image
  3. If I adjust the width of the svg from 1em to 1.1em (manual CSS tweak), it looks centered on my PC:
    image
1 Like
8

Odd. I’ll do some further investigation later!

1 Like
11

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

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 :thinking:

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