TimePicker: Layout breaks when the timezone string is long

[afercia]

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

[afercia]

Noting that this can't be reproduced any longer after #56196

But: I think the changes from #56196 should be adjusted a bit, so I'd keep this open for now.

[mirka]

What is the desired layout tweak here? We could for example flex-wrap it so it goes to the next line when the width is too narrow.

But if the max possible length of the timezone string is not that long, it's more about tweaking the width of whatever container the consumer is putting TimePicker in. (TimePicker itself does not have width constraints.)

[afercia]

But if the max possible length of the timezone string is not that long, it's more about tweaking the width of whatever container the consumer is putting

Yes, the timezone string can contain max 2 numbers (minutes) after a colon. I think it's more about removing the spacer between AM/PM and the timezone. That spacer is unnecessary and it's responsible for the breakage. For example, the timezone could use a left margin auto to be right aligned and the spacer be entirely removed.