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

Brianmitchtay commented 10 months ago

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

https://github.com/Automattic/themes/assets/45057772/41c65f70-c086-470b-8a15-41ff4596cdfa

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[bot] commented 10 months ago

Support References

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

[ ] 7439836-zen

kdingsa8c commented 10 months ago

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

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

Brianmitchtay commented 10 months ago

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.

amulet-Screenshot_2023-12-22-22-31-25-086_com android chrome amuletScreenshot_2023-12-22-22-31-02-874_com android chrome