New topic mobile CSS corruption?

Product Support

AI-generated summary

A user, emyoulation, is experiencing issues with the mobile CSS on the Discourse installation for the Gramps-project.org Forum. The problems include corrupted wrapping for the header, misplaced UI elements, and pop-up windows appearing off-screen.

After troubleshooting, emyoulation discovered that the app had switched to Desktop View, and switching back to Mobile View improved the layout. However, a comparison with another site reveals that the Gramps-project.org Forum’s Desktop View has extra spaces between header elements, causing line breaks and layout issues. JammyDodger suggested checking in safe-mode, but the problems persisted, ruling out interference from theme components or plugins.

1

Either the mobile CSS for New Topics on our Discourse installation is corrupted or the cached file on my (moto x⁴ with Android9) Discourse app is corrupted.

How do I troubleshoot this possible corruption?

There wasn’t an option in the app setting to flush the cache. So I uninstalled and re-installed when the discourse.gramps-project.org Forum offered from Chrome browser.

It has messed up the wrapping for the header. That pushed some things off-screen and screwed up others. Worst, it moved a hotlinked & nearly invisible (bold, white) plus symbol (+) from the Create Topic button up into the text editing section.

Screenshot_20220131-074936
Screenshot_20220131-0749361080×1920 139 KB

The New Topic editor on this forum looks fine:

Screenshot_20220131-083155
Screenshot_20220131-0831551080×1920 149 KB

I have other problems with pop-up windows that appear offset to the left with 1/3 off-screen & inaccessible. (Painful when the button that dismisses the dialog is off-screen!)

2

Do these problems still persist in safe-mode?

If not, it could be interference from a theme component or plugin.

3

Thanks for the suggestion. Yes, it persisted in safe mode.

Somehow the app had toggled out of Mobile View into Desktop View.

Screenshot_20220131-090850~2
Screenshot_20220131-090850~21080×1920 170 KB

Selecting Mobile View was much better. (Definitely did not toggle this intentionally. Our support MediaWiki site is more accessible in Desktop mode than mobile. So I am quite aware when choosing this.)

However, the Desktop View here renders more cleanly (using the same device) on this site than ours:

Screenshot_20220131-090759
Screenshot_20220131-0907591080×1920 151 KB

It looks like our site has an extra spaces between the 3 elements in the header … which translates into line breaks that fouls everything up.