When a Wiki Post is edited then have problems maintaining the correct width on mobile devices

Contribute UX

AI-generated summary

A mobile layout issue occurs when editing a wiki post on mobile devices. dax identified the problem on an Huawei P10 Lite with Chrome and provided several examples of affected topics. The issue arises when adding certain elements, such as code, oneboxes, quotes, or tables.

@awesomerobot has pushed some fixes, including preventing the modal container from overflowing on mobile devices. However, wide tables and code blocks with long strings may still overflow and require horizontal scrolling. The history modal has also been updated to resize to portrait tablet resolutions.

1

Tested using an Huawei P10 Lite and Chrome

Examples of affected topics:

I tried to edit a wiki topic that had never been modified and that was displayed correctly by clicking the green pencil, immediately after the fake change made (I changed a letter) the layout on mobile broke: https://meta.discourse.org/t/what-is-a-onebox/78060

This topic has the correct layout instead, even if it has just been modified Contributor Interviews – Jay Pfaffman

I am able to break the layout by entering at least:

  • some code ([code][/code] or 4 spaces)
  • a onebox
  • quotes
  • a table

PS. sorry Jay! :stuck_out_tongue_closed_eyes:

7 Likes
2

This has got to be some missing CSS rule limiting width of the modal cc @awesomerobot

4 Likes
3

Pushed some fixes:

https://github.com/discourse/discourse/commit/900f37e5a9fe714c939b7bbd5cd27ef3942244b0

  • The modal container/controls shouldn’t overflow anymore on mobile devices, but in some instances the content will (wide tables and code blocks with long unbroken strings). I could force tables and code blocks to break words and wrap, but it feels better to preserve the structure and scroll horizontally.

  • I also updated it so the history modal will resize to portrait tablet resolutions, previously we were at a fixed 960px width.

6 Likes