Description

Splitting this out from #56211 (comment)

The TimePicker renders a Spacer component between the AM/PM buttons and the timezone indication.

I would argue that a component should not render a Spacer, which is a presentational component. Presentation should be kept separate from funcitonality.

Anyways, when the timezone indication is a little longer than usual, e.g. UTC+5.75, th elayout breaks and the AM/PM buttons get stacked vertically. Note: the displayed value 5.75 is wrong. I created #56254 to address that.

Screenshot:

Step-by-step reproduction instructions

• Go to the WordPress admin Settings > General Settings > Timezone.
• Set the Timezone value to UTC+5:45 and save.
• Go to the post editor and publish a new post.
• Click the Publish date in the settings panel.
• The Publish popover appears.
• Observe the AM/PM buttons leyout is broken.
• Observe there is enough space to display the longer timezone value but the layout breaks regardless.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes