Topic navigation toggle prevents interactions on the page in a certain area

Contribute UX
,

AI-generated summary

The discussion revolves around an issue with the topic navigation toggle on mobile devices, where an area to its right is non-interactive. Canapin reported this issue, providing a screenshot and a video to demonstrate the problem. awesomerobot responded with a potential fix, linking to a GitHub pull request. However, Don noted that this fix introduced another issue, where the .topic-navigation-outlet was not clickable, and suggested adding pointer-events: auto to resolve it. awesomerobot then provided an updated fix, linking to another GitHub pull request, which re-enables pointer events on all children of the wrapper.

1

On mobile, the area to the right of the navigation toggle, at the same height that the navigation toggle, can’t be interacted, though the nav button is small and floating to the right of the screen.

It’s badly explained, so, here’s a screenshot. Tap anywhere on the purple area, it won’t do anything. You can try to like, show likes or reactions, copy link, show the replied post, etc… No interaction will work.

The image is a screenshot of a tweet by Stanley B. Gehman, explaining his method for re-ordering comments by referencing topics and creating a new post for introductions while updating links. (Captioned by AI)
The image is a screenshot of a tweet by Stanley B. Gehman, explaining his method for re-ordering comments by referencing topics and creating a new post for introductions while updating links. (Captioned by AI)409×428 33.4 KB

I mostly won’t notice it, but my thumb tends to move across this area, and having a “dead touch” from time to time, requiring me to scroll more, bugs me :bug:

6 Likes
2

Thanks! this should fix it

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

4 Likes
3

Thanks Kris :slightly_smiling_face: I think I won’t create a new topic for this, I’ve noticed after this change the .topic-navigation-outlet is not clickable. For example the .d-toc-wrapper. I added pointer-events: auto which fixed that.

2 Likes
4

yes good catch, here I’m re-enabling pointer events on all children of the wrapper to avoid this: UX: ensure all children of `.with-topic-progress` are clickable by awesomerobot · Pull Request #31176 · discourse/discourse · GitHub

2 Likes