Search block's button text escapes container when block is set to only display the button

[skorasaurus]

Description

I first noticed that this behavior first arose in 16.6; did not occur in 16.4. Likely Introduced in #53373

When you have a search block, hide the search field and only display the button but replace the icon with text (e.g. 'search') the text escapes the button's container.

@ramonjd tried to fix a similar issue with #54773 when only the icon is displayed. Unfortunately, I'm still able to reproduce this issue after applying that PR.

I'm able to reproduce this on a custom block theme as well as on Tova, as well as Twenty-twenty-three.

Step-by-step reproduction instructions

1. Create or edit a navigation block in a theme and include with the following markup:
   <!-- wp:search {"showLabel":false,"buttonText":"Search","buttonPosition":"button-only","isSearchFieldHidden":true} /-->

2. Save changes

3. view changes on front-end of website

Screenshots, screen recording, code snippet

Tova:

My custom theme:

Environment info

WP 6.3.1, gutenberg built from trunk from today, 2023-09-26 (tagged as 16.7.0-rc.2; last commit

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

[ramonjd]

Thanks for reporting this @skorasaurus

I can reproduce and can confirm that it's the max-width rule that affecting the button.

2023-09-27.08.39.25.mp4

#54773 worked because the icon button is mostly small.

As for the text button, it looks like @t-hamano is right: the challenge is to apply the max-width style depending on context.

I have a PR that tries this again, but based on whether the form is expanded or not:

• Search block: allow space for input field only when form expanded #54846