Fix the search button overflow in the search block

[sarthaknagoshe2002]

What?

This PR addresses the issue of the search button overflow when using button inside at width=25%.

Closes: #66906

Why?

This PR is necessary to ensure the UI doesn't break when selecting different editor options.

How?

This PR resolves the issue by matching the appearance of the block on frontend with that of the appearance in the editor

Testing Instructions

1. Add/Create a post.
2. Insert a Search Block.
3. Set "Button Position" to "button inside".
4. Set the block width to 25%.
5. Verify that the search button's appearance is same as that of the editor on the frontend and the button is contained in the search box.

Testing Instructions for Keyboard

Verify button appearance: Use Tab and Shift confirming that the search button looks consistent and is contained within the search box in both the editor and on the frontend.

Screenshots or screencast

Frontend before	Frontend after	Editor

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sarthaknagoshe2002 <sarthaknagoshe2002@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @sarthaknagoshe2002! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[carolinan]

These issues are tricky because the resulting width is much wider than before, it is no longer going to be "25%" and the width option is no longer going to be respected, or am I wrong?

[carolinan]

Aside, but I think it might look better if the placeholder text was truncated with an ellipsis rather than cut off.

[sarthaknagoshe2002]

@carolinan I have basically tried to match the UI on the frontend with the editor to serve 2 issues,

1. To solve the overflow problem
2. The UX is improved since the UI is same in the editor as well as on the frontend.

Also the overall size of the div containing the input box and button is same as earlier.
Just the input box is modified to contain the button inside the input box.

[carolinan]

I have tested this again and the added padding breaks the button styling.
In Twenty Seventeen for example, the padding is not present in the editor at all, but on the front, the padding is so large that the text "search" is split into two lines on all search blocks, even when the option "button inside" is not enabled.

[sarthaknagoshe2002]

@carolinan any other approach that you would like to suggest??

[sarthaknagoshe2002]

@carolinan I have updated the styling as per your suggestion to prevent the breaking of padding across different themes, please have a look.