TinyMCE modal doesn't display nicely on mobile on the forum page

Field Tab

Scrum

Time Tracking

Field Tab

Scrum

Time Tracking

Description

Discovered by @Moien Abadi while testing https://moodle.atlassian.net/browse/MDLQA-20099#icft=MDLQA-20099 using Android mobile with Chrome:

The modal opened by TiniMCE is incorrectly displayed, caused by an empty horizontal blank space with scroll.

Another different but directly related problem was detected in https://moodle.atlassian.net/browse/MDL-84749#icft=MDL-84749 that needs to be addressed globally in this issue, because both fixes could impact each other:

Description copied from original issue
There is a bug where the action menu dropdown is being cropped (triggered via the ellipses).

To reproduce:

Go to a courses forum
Add a discussion topic
Enter in any text and save
Once the topic has been added, click on the ellipses action menu inside the table row.
Observe that the dropdown menu is cropped.

Testing Instructions

Setup

Login as administrator
Create some users
Create a new course
Create a new forum activity
Add 2 posts in the forum activity
Simulate a mobile page width. This can be done with the browser inspector or by setting the window width between 320px and 425px.

Test forum table

Go to the forum activity
Confirm you can scroll horizontally the table contents
Confirm that the action menus in the forum table are correctly displayed (not cropped)
Click on Add discussion topic
Click on Insert image on the tinyMCE editor
Confirm that the modal is correctly displayed
Click on Record audio on the tinyMCE editor
Confirm that the modal is correctly displayed

Test Report builder table

Go to Reports under the user menu
Create a new report
Confirm you can scroll horizontally the table contents
Confirm that the action menus in the table are correctly displayed (not cropped)

Browser users table

Go to Site administration > Users > Browse list of users
Confirm you can scroll horizontally the table contents
Confirm that the action menus in the table are correctly displayed (not cropped)

Automated test results

Launching automatic jobs for branch MDL-85077-main

https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/18971/ PHPUnit (sqlsrv / complete)
https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64929/ Behat (NonJS - boost and classic / complete)
https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64930/ Behat (Firefox - boost / complete)
https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64931/ Behat (Firefox - classic / complete)
https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/64932/ App tests (stable app version) / complete)

Built on: Thu Apr 10 08:06:08 UTC 2025

Pre-check results

Code verified against automated checks.

Checked MDL-85077 using repository: https://github.com/roland04/moodle.git

main (0 errors / 0 warnings) [branch: MDL-85077-main | CI Job]

_{More information about this report}

Built on: Wed Apr 9 13:50:00 UTC 2025

Workaround

None

Attachments

Linked work items

Activity

noreply

11 April 2025 at 15:30

Thanks for your contributions! This change is now available from the main moodle.git repository and will shortly be available on download.moodle.org.

Closing as fixed!

Kim Jared Lucas

11 April 2025 at 01:52

The issue has been successfully tested and fixed in version Main. Thank you!

(1) 2.

(1) 3.

(1) 6.

(1) 8.

(2) 3.

(2) 4.

(3) 3.

Sara Arjona

10 April 2025 at 14:13

Hi Mikel,

Thank you for working on this issue The patch looks good. Well done! <3

It has now been integrated to main \o/
Over to testing.

Dani Palou

10 April 2025 at 09:47

For the record, the apps test failure is not related to this issue, it can be ignored.

Ferran Recio Calderó

9 April 2025 at 15:42

Hi @Mikel Martín Corrales ,

Thanks for working on this issue. I know it was not easy to locate the error, and the final solution is well-built and neat.

Follow the checks as defined in Moodle's peer review documentation

[❌] Syntax
[❌] Output
[-] Component library
[-] Icons
[-] Language
[✅] Accessibility
[-] Databases
[-] Performance and Clustering
[-] Security
[-] Privacy (see Privacy API)
[-] The Moodle mobile app / web services
[-] Third party code
[-] Documentation
[✅] Git
[✅] Testing (instructions and automated tests)
[✅] Overall completeness and correctness

Resize issue view side panel

Fixed

Details

Priority

Minor

Affects versions

5.0

Components

Themes

Labels

triagedhqteam_moppiesci

Assignee

Mikel Martín Corrales

Reporter

Simey Lameze

Peer reviewer

Ferran Recio Calderó

Integrator

Sara Arjona

Fix versions

5.0

Tester

Kim Jared Lucas

Participants

Dani Palou

Ferran Recio Calderó

Kim Jared Lucas

Meirza

Mihail Geshoski

Mikel Martín Corrales

noreply

Sara Arjona

Show all 9 people

Pull from Repository

Pull Main Diff URL

Pull Main Branch

MDL-85077-main

Component Lead Review

Parent

MDL-71979 Upgrade boost to use Bootstrap 5.x

Clockify

Created 1 April 2025 at 05:21

Updated 16 April 2025 at 08:19

Resolved 11 April 2025 at 15:30

TinyMCE modal doesn't display nicely on mobile on the forum page

Description

Testing Instructions

Setup

Test forum table

Test Report builder table

Browser users table

Automated test results

Pre-check results

Workaround

Attachments

Linked work items

Discovered while testing

caused a regression

is a regression caused by

will help resolve

Activity

Details

Priority

Affects versions

Components

Labels

Assignee

Reporter

Peer reviewer

Integrator

Fix versions

Tester

Participants

Pull from Repository

Pull Main Diff URL

Pull Main Branch

Component Lead Review

Parent

Clockify