[Enhancement]: Amulet Theme's primary menu on mobile sits against edge of viewport. No margin or padding

[Brianmitchtay]

Quick summary

We have a user in 7439836-zd-a8c that is using the amulet theme and is frustrated by some of the built-in styles, specifically the spacing on mobile and how in some cases the text has no margin between it and the edge of the viewport.

Is this an intentional design choice? Or should we move to have some padding added here? I'm inclined to agree with the user that it seems off. I've tried modifying the styling with CSS but have been unable to find a fix.

See screen recording below

Screen.Recording.2023-12-20.at.3.51.18.PM.mov

Steps to reproduce

Create an AT site
Install Amulet Theme
Inspect page to view with a mobile screen size
Open the primary navigation menu
Note the lack of padding or margin

What you expected to happen

The menu items on mobile shouldn't be right against the edge of the viewport with no padding

What actually happened

Browser

No response

Context

Customer reported in 7439836-zen

Platform (Simple, Atomic, or both?)

Atomic

Other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, difficult to implement

Workaround details

There is likely a way to modify this with CSS but I've not been able to target it effectively yet.

[github-actions]

Support References

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

• 7439836-zen

[kdingsa8c]

The following CSS appears to resolve this issue:
ref: 7439836-zen

.wp-block-navigation__responsive-close {
    width: 85%;
}

[Brianmitchtay]

User has replied with a series of screenshots showing many places on the site where text is pressed right against the viewport edge on mobile.

These shared areas can all be edited in their respective templates via the site editor, however if we decide to add some padding natively to the theme a preferable solution here would be some theme-wide styling for a small amount of horizontal padding for text and elements on mobile views.

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO
From Amulet demo site:

Tsubaki for comparison:

📌 ACTIONS

• Triaged

📌 Message to Author
@Brianmitchtay I have a hunch that this could be intentional. Pinging @alaczek to confirm.

As a workaround, you can define a custom padding globally from Global Styles:

[mmtr]

I don't think the lack of padding is intentional according to original design visible in p9Jlb4-64U-p2:

The issue also affects the demo site (https://amuletdemo.wpcomstaging.com/):