Reactions picker positioned outside of viewport on mobile

We are having a very similar problem to that was described here:

The reactions picker is displayed outside of the view port.

Using debug tools I was able to determine that is receives element.style {left: 89.6562px; top: 2375.19px; }. Since this is an element style I haven’t had any success in fiddling with some other css to affect this.

If I resize my screen to be something like 3000px tall, I can actually see the picker there.

We do not have the jira plugin determined to be the culprit here: Unable to use reactions on IOS/Mobile - #23 by Don

We are using the custom reactions theme component: Custom Discourse Reactions - #14 by Don I don’t see how that could have this effect though.

Unfortunately I cannot provide a full list of plugins we do have right now, as I have no administrator privileges.

I would be useful to try in safe mode though, just to make sure.

I did not realize, I could simply try safe mode without any privileges.

After that was pointed out to me, I observed that

  • a) Reactions are a plugin, so disabling all plugins got rid of the problem in an unhelpful way ^^
  • b) More importantly: With no themes, everything works fine.

The only theme that should have any interaction with reactions is

The reactions definitely worked correctly a few weeks ago and that theme has not changed in years.

Either it interacts weirdly with a recent discourse update or something broke in our configuration. I will try to inquire more.

I have done some additional digging:

My guess is, that this commit in the discourse core is what caused the break:

Specifically this:

seems to interact badly with this styling from the theme component:

Deactivating this css line in the dev tool doesn’t change the position of the currently displayed reactions picker, but causes the next one to be placed correctly.

Your best bet would be to reach out to the author of that theme component and ask them to fix it. Maybe they are not aware of it yet.

I have just opened an issue there.

The theme component has been updated and the issue resolved.