Action Bar: Increasing default font size in global styles affects action bar styling

[jp-imagines]

Quick summary

Increasing the default font size for text in the FSE Styles pane causes the

Steps to reproduce

1. On a Simple site, enable any Site Editing-compatible theme.
2. Open the Styles pane in the Site Editor (Appearance > Editor > Styles).
3. In the Styles pane, go to Typography > Text and set a custom font size (e.g. 55 px). Save changes.
4. View the live site.

What you expected to happen

The action bar should not be affected.

What actually happened

All elements of the action bar (e.g. "Follow," "Edit Site," the "..." kebab menu) float outside of the action bar button. It specifically looks like the <ul> element inherits the custom font size, which increases the space available for the elements to render in (but doesn't actually affect the size of the text options):

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple

Logs or notes

No response

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated as described using TT3. Tested font sizes with different units, px and rem and the same result follows. The text of the main #actionbar inherits the custom font size, but it's containing elements don't change, causing the improper formating/layout.

Screenshots/Recordings

https://github.com/Automattic/wp-calypso/assets/27249804/f9f5e687-66a5-4171-9352-c33fe2125e50

📌 ACTIONS

• Assigned to Non-Urgent
• CC: @Automattic/loop Not sure if the Action Bar would fall under your purview , but as an engagement (follow) tool, figured I'd ping you in case you think this is something you'd look into at some point!

[davemart-in]

Thanks! I added this to our bugs board.

[annezazu]

I can still replicate this!