Emoji-Picker shows itself in an unoptimized Position

UX
1

Video first:

Env:

OS: Win10
Browser: Google Chrome (plugins disabled)
Site: https://meta.discourse.org/u/{your user name here}/preferences/profile
reproducible: Yes

Description:

(I don’ t kown if it is intended to be.) I found that the position of emoji-picker of main composer in the past few days was fixed, but not in user’ s Profile . Moreover skincolor of emojis in the Picker-box showed itself in my case neither completely nor sticky. I changed Browser(Chrome) to Firefox and with non-plugins tried again, but issues still exsited. This problem should be fixed in the future.

I found this code clip in emoji.scss. This is common style for every emoji-picker both in main composer and bio-composer.

.emoji-picker {
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  background-clip: padding-box;
  z-index: z("modal","content"); 
  position: fixed;
  display: none;
  flex-direction: row;
  height: 300px;
  border-radius: 3px;
  color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
  background-color: $secondary;
  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
}

Give a try, but no joy:

I tried to change position: fixed; to position: absolute; but i failed. Everytime i clicked emoji-button, the inline-style was going to be inserted automatically.

I am not a developer, no idea how to solve it, so i report it to the ‘open air’. :sweat_smile:

Kind regards to discourse team and fans
happy coding!

4 Likes
3

I always forget the picker is used here too. Will give it a look in the next days.

3 Likes
6

:heavy_check_mark: The positioning was broken only on desktop and is now fixed.

https://github.com/discourse/discourse/pull/7602

6 Likes