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

• premium/annalee
• premium/arkin never launched
• premium/carnation
• premium/gourmetto
• premium/outland
• premium/peirao
• premium/tenku
• premium/zaino
• pub/aldente relaunched under diff name
• pub/artly
• pub/bibimbap
• pub/bitacora
• pub/bute
• pub/exmoor
• pub/fewer
• pub/fotograma
• pub/freddie
• pub/jinjang
• pub/kigen
• pub/lettre (maybe, it uses empty strings rather than zero?)
• pub/loic
• pub/luce
• pub/luminance
• pub/montagna relaunched under diff name
• pub/optimismo
• pub/poesis
• pub/storia
• pub/strand
• pub/tenaz relaunched under diff name
• pub/tomoni
• pub/trellick
• pub/tronar
• 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...