[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