Reactions picker positioned outside of viewport on mobile

Product Support

AI-generated summary

TobiasUdtke reported an issue where the reactions picker appears outside the viewport on mobile devices, receiving incorrect positioning styles. After ruling out the Jira plugin, chapoi suggested testing in safe mode. TobiasUdtke confirmed the problem disappeared when themes were disabled, isolating the cause to the discourse-custom-reactions theme component. Further investigation by TobiasUdtke revealed a conflict between a recent Discourse core commit regarding reaction positioning and specific CSS styling within the theme component. chapoi advised contacting the theme author for a fix. TobiasUdtke opened an issue with the author, and TobiasUdtke subsequently confirmed that the theme component was updated and the issue is now resolved.

1

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.

image
image316×514 27.4 KB

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.

2

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

3

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

https://github.com/VaperinaDEV/discourse-custom-reactions

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.

4

I have done some additional digging:

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

https://github.com/discourse/discourse/commit/1ea6dd56caccc051eda26e15f5eb0d34fa5a5566

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.

5

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.

6

I have just opened an issue there.

7

The theme component has been updated and the issue resolved.