Search Block: Fix unintended wrapping of button text in "Button only" style #53373
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
t-hamano
added
the
[Block] Search
t-hamano
added
the
[Focus] Accessibility (a11y)
|
Size Change: +87 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
jasmussen
reviewed
Aug 7, 2023
| // Prevent unintended text wrapping. | ||
| flex-shrink: 0; | ||
| // Ensure minimum input field width in small viewports. | ||
| max-width: calc(100% - 100px); |
There was a problem hiding this comment.
Can you elaborate on how this calc math works? What are those 100px meant to capture? Is it the width of the confirm-button?
There was a problem hiding this comment.
This 100px is the minimum width of the input field when it opens.
Without this style, the input field would be extremely narrow in mobile viewports and the button would overflow.
There is no clear reason for the number 100px, but I believe some fixed value is necessary.
|
Thanks for the review, @jasmussen, @jffng! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes: #53297
What?
This PR fixes an unintentional wrapping of button text when opening and closing input fields when the Search block is "Button only" style.
e51464276e234e6c3eb9463785a665d7.mp4
Why?
The input field and the button are both children of the Flex layout. And since the input field has
fiex-basis:100%applied, the width of the button is squashed.How?
The fact that the input field extends as far as possible to the full width of the parent element is itself an expected behavior. However, to prevent unnecessary button text wrapping, I applied the following styles to the button:
flex-shrink: 0;to prevent text wrappingmax-width: calc(100% - 100px);to prevent button overflow and to ensure minimum width of input fieldsTesting Instructions
Screenshots or screencast
f1659ea8fcd90e3cdae1670e6e4593c2.mp4