Post Editor Document Sidebar Publish Date causes horizontal overflow

[fabiankaegy]

I just noticed whilst testing Gutenberg version 18.5 RC1 that the Publish date control causes a horizontal scroll bar to appear in the document settings sidebar in the post editor.

[fabiankaegy]

CC: @jameskoster as I believe I saw you were involved in the redesign work here :)

[t-hamano]

This is strange because this button has text-wrap: pretty; applied to it, so the text should wrap. And this style was added in #61954, which is part of Gutenberg 18.5.

• Do you have text-wrap: pretty; applied to that button?
• Do you have this problem with the latest Gutenberg?

[fabiankaegy]

@t-hamano safari doesn't support text wrap pretty. It only supports balance at this point

[t-hamano]

safari doesn't support text wrap pretty

I see, that's certainly true.

@WordPress/gutenberg-design To prevent text overflow in Safari, it may be better to use something like white-space: normal instead of text-wrap: pretty for this panel only. Of course, the text wrapping position will change.

[jasmussen]

Can we do this?

text-wrap: balance;
text-wrap: pretty;

Presumably, that would cause Safari to fall back to balance if pretty isn't available.

[fabiankaegy]

@jasmussen Yeah that is how I commonly do it :) With a little comment explaining why the fallback is there =D