בעיית תפריט גלגל השיניים של עורך התצוגה הניידת

סיכום מבוסס בינה מלאכותית

The issue concerns a bug in the mobile view editor where the cog dropdown menu fails to display properly, instead causing the editor button bar to become vertically scrollable. Users piffy, Benjamin_D, JammyDodger, and Don report the issue on Android Chrome, both on production and meta, with the problem occurring in safe mode. The bug is tied to the overflow-x: auto; property on the .d-editor-button-bar container, which hides the dropdown menu on mobile due to its position: absolute styling, unlike desktop where position: fixed works correctly. awesomerobot identifies the root cause and proposes a fix by removing the overflow-x: auto; property on mobile, with a commit already made to address the issue. The team is still considering long-term solutions to handle toolbar overflow on mobile.

Version Installed:

Issue:

I entered safe mode on mobile view. While replying to a post, the editor has the cog option at the end. When I tap it, the d-editor-button-bar becomes vertically scrollable instead of displaying a dropdown of the extra options.


image

I’m assuming a dropdown box should appear? I’m getting this same issue on meta too.

2 לייקים

edit: I can reproduce with chrome 103 on android on meta
it’s probably fairly new, I don’t see it on 2.9.0.beta6 ( 09f1ef6b05 )

2 לייקים

I was just checking myself. :slightly_smiling_face: I can replicate on Android/Chrome:

2 לייקים

I can reproduce on desktop too with non staff account. On desktop it works for me with admin and moderator account.

On mobile it seems to the safe mode not required to repro this issue.

3 לייקים

The menu is positioned differently on desktop (position: fixed) vs mobile (position: absolute) so because of :mage: CSS magic :sparkles: the overflow-x: auto; on the .d-editor-button-bar container was hiding the menu on mobile but has no effect on desktop.

That overflow-x: auto; property fixes this issue on desktop:

Screen Shot 2022-07-18 at 8.46.39 PM

I just added a fix that shows the menu again on mobile by removing overflow-x: auto;

https://github.com/discourse/discourse/commit/d8714facb605e1ec8fc5f2021b2551a0fce51e18

We’ll have to figure out if we can change positioning or do something else to solve the toolbar overflow issue on mobile.

5 לייקים