[Bug]: Menu overlays don't have sufficient padding

[dsas]

Quick summary

Some themes use unit-less values for styles.spacing.padding in theme.json which means the overlay menu is displayed without padding

Unit-less values	United values

Steps to reproduce

1. Switch to a site with one of the potentially affected themes
2. Change the viewport to mobile
3. Click the menu button

What you expected to happen

The overlay menu should appear with spacing so that menu items are not butted up against the sides of the screen

What actually happened

The overlay menu hugs the side of the screen

Browser

No response

Context

First discovered in D128657-code for these themes

Platform (Simple, Atomic, or both?)

No response

Themes to check

• [x] premium/annalee
• [ ] ~~premium/arkin~~ never launched
• [x] premium/carnation
• [x] premium/gourmetto
• [x] premium/outland
• [x] premium/peirao
• [x] premium/tenku
• [x] premium/zaino
• [ ] ~~pub/aldente~~ relaunched under diff name
• [x] pub/artly
• [x] pub/bibimbap
• [x] pub/bitacora
• [x] pub/bute
• [x] pub/exmoor
• [x] pub/fewer
• [x] pub/fotograma
• [x] pub/freddie
• [x] pub/jinjang
• [x] pub/kigen
• [x] pub/lettre (maybe, it uses empty strings rather than zero?)
• [x] pub/loic
• [x] pub/luce
• [x] pub/luminance
• [ ] ~~pub/montagna~~ relaunched under diff name
• [ ] pub/optimismo
• [x] pub/poesis
• [x] pub/storia
• [ ] pub/strand
• [ ] ~~pub/tenaz~~ relaunched under diff name
• [x] pub/tomoni
• [x] pub/trellick
• [x] pub/tronar
• [x] pub/tu

Other notes

I generated the list of themes to check by running this command on my sandbox in ~/public_html/wp-content/themes:

for FILE in `ls */*/theme.json`; do echo $FILE; jq .styles.spacing.padding $FILE; done | grep -v px | grep -v preset | grep -v null

and then doing some manual tidy up.

I've publicised the issue so that hopefully we avoid this in future. See pNEWy-hUC-p2

Reproducibility

Consistent

Severity

All

Available workarounds?

No but the platform is still usable

Workaround details

You can probably add some custom CSS...

### Themes to fix
- [ ] premium/annalee
- [ ] premium/carnation
-  [ ] premium/gourmetto
-   [x]   premium/outland
-   [ ]   premium/peirao
-   [ ]   pub/artly
-   [ ]   pub/bibimbap
-   [ ]   pub/bute
-   [ ]   pub/exmoor
-   [ ]   pub/fewer
-   [ ]   pub/fotograma
-   [ ]   pub/freddie
-   [ ]   pub/jinjang
-   [ ]   pub/kigen
-   [ ]   pub/lettre
-   [ ]   pub/loic
-   [ ]   pub/luce
-   [ ]   pub/poesis
-   [ ]   pub/storia
-   [ ]   pub/tomoni
-   [ ]   pub/trellick
-   [ ]   pub/tronar
-   [ ]   pub/tu

[maciejpilarski]

📌 REPRODUCTION RESULTS – Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO I could not find the following themes in the https://wordpress.com/themes/ repo (not tested):

• arkin
• aldente
• montagna
• optismo
• strand
• tenaz

I was not able to reproduce the issue in (it might be because the menu items are centered):

• tenku
• zaino
• bitacora
• luminance

📌 ACTIONS

• Triaged

[dsas]

Thank you very much @maciejpilarski for testing all of those themes.

Of the ones you could not find:

• Arkin was never launched
• Aldente, montagna & tenaz were relaunched under different names (see pNEWy-hp0-p2)
• Strand is here: https://wordpress.com/theme/strand/
• Optimismo is here (I had a typo): https://wordpress.com/theme/optimismo/

[iamtakashi]

Thanks, @dsas, for starting this issue.

How should we tackle this? Should each designer own and fix their themes, and could you help with the reviewing, merging, and deployment?

cc: @beafialho @henriqueiamarino

[dsas]

Whatever works best for you @iamtakashi, I'm happy to help with reviewing etc, just let me know.

[philnick206]

Reported in 8016038-zd-a8c

[github-actions[bot]]

Support References

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

• [ ] 8016038-zen
• [ ] 8801728-zen
• [ ] 9349299-zen

[jartes]

Another one with Artly 8801728-zd-a8c

[supernovia]

9349299-zd-a8c

Same problem on CoachAva too.

@getdave This issue may be helpful re: feedback on the navigation block, too

[iamtakashi]

Thanks for adding more reports. I'll fix them all at once.

[iamtakashi]

@jartes Artly has been fixed.

@supernovia CoachAva has been fixed.

[iamtakashi]

I fixed all the themes mentioned here. I'll close this issue, but feel free to reopen it, if there are more themes to fix. I'll take care of it. Thanks!