Amulet: Empty Space on the Right Side on Mobile

[mxhassani]

Quick summary

On mobile, the theme has some extra space to the side, causing some issues including the inability to close the full page menu.

Steps to reproduce

1. Enable the Amulet theme. Or go to the demo site: https://amuletdemo.wpcomstaging.com/
2. Switch to mobile view on your browser
3. Scroll to the left and right
4. Notice the white space on the right
5. You can also open the menu and see how the 'x' close button is out of view

A clear and concise description of what you expected to happen.

The page should not scroll left and right on mobile.
The X button on the menu should appear within the view.

What actually happened

There is an empty space on the right of all content:

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

This is a mix of two issues:

Issue 1: There is an ongoing issue with FSE where text breaks don't apply automatically - #7409
This can be addressed by editing all the default H2 blocks included with the theme, but that's sub-optimal.

A quick one is to use this CSS code:

@media only screen and (max-width: 700px) {
  h2:not([class^="has"]), .has-x-large-font-size{
    font-size: 14vw !important;
    word-break: break-word;
  }
}

Issue 2: .alignfull elements use a negative margin, this can be fixed with this code:

@media only screen and (max-width: 700px) {
  .alignfull {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

This can also be customized from FSE, but there are too many blocks to customize.

Platform (Simple and/or Atomic)

No response

Logs or notes

Aside from the general FSE issue #7409 , The following .alignfull negative margins are problematic:

.wp-container-core-group-is-layout-7 > .alignfull {
  margin-right:calc(5vw * -1);
  margin-left:calc(5vw * -1);
}

.wp-container-core-group-is-layout-3 > .alignfull {
  margin-right:calc(3vw * -1);
  margin-left:calc(3vw * -1);
}
.
.

Negative margins have the opposite effect of margin, making the blocks bigger than their container (if not restricted). In this case 5vw and 3vw bigger.

8917691-zen

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 8917691-zen

[jartes]

📌 REPRODUCTION RESULTS

• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Tested on iPhone 13, and I was able to get extra scroll on the right.
• Also, noting that the mobile menu items and the X (close) icon is too close to the screen edges.

📌 ACTIONS

• Triaged

@Automattic/t-rex can you take a look at this one as an earliest opportunity? Thank you!