Inconsistency in width display of "Map" module on Landing Pages in GrapeJS

[code5rick]

Mautic Version

5.0.x series

Way of installing

I downloaded a release from https://www.mautic.org/mautic-releases

PHP version

8.0.2

What browsers are you seeing the problem on?

Chrome

What happened?

When utilizing the GrapeJS builder for landing pages, we've encountered an issue with the "Map" module. Despite appearing to have a 100% width when inserted onto the page, it is actually displaying with a fixed width of 350px upon saving.

This discrepancy between the displayed width and the actual width could potentially mislead users into believing that the module spans the full width of the page when, in fact, it does not.

First reported on: https://github.com/mautic/mautic/pull/13283#issuecomment-2015462092

How can we reproduce this issue?

Step 1: Go to Components > Landing Pages. Step 2: Create a new landing page. Step 3: Provide a title for the landing page. Step 4: Choose the "Blank" theme, then click on "Builder." Step 5: Add the "Map" module to the landing page. Notice that it initially appears to occupy the full width of the page.

Step 6: Exit the builder by clicking on the close button, then select "Save & Close." Step 7: Preview the page to visualise the actual width of the "Map" module.

Relevant log output

None.

Code of Conduct

• [X] I confirm that I have read and agree to follow this project's Code of Conduct

---

Care about this issue? Want to get it resolved sooner? If you are a member of Mautic, you can add some funds to the Bounties Project so that the person who completes this task can claim those funds once it is merged by a member of the core team! Read the docs here.

[dsp76]

Hi @code5rick, actually - step 5 is due to the missing column element? When I placed a column first, I didn't experience the full width in the editor window.

As a workaround, you could add the 100% for width and set the max width to the absolut width of your container. Not sure if this is a Mautic or Grape-JS Bug.

[RCheesley]

@code5rick any thoughts on this?

[code5rick]

I didn't put the module inside of a column or a section. Maybe thats the problem?

[RCheesley]

OK, closing this PR then!

[github-actions[bot]]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see. If this issue is continuing with the lastest stable version of Mautic, please open a new issue that references this one.