FIX Search box css for compact size #1407
Merged
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
emteknetnz
force-pushed
the
pulls/1.12/button-resize
branch
from
9bc5ca7
to
4b605e8
Compare
1 task
emteknetnz
force-pushed
the
pulls/1.12/button-resize
branch
2 times, most recently
from
9ffd8ee
to
00c4a37
Compare
| @@ -90,6 +91,10 @@ class SearchBox extends Component { | |||
| return this.state.tagWidth + existingPadding; | |||
| } | |||
|
|
|||
| calculateInputRightPadding() { | |||
| return this.state.width < 576 ? 121 : 264; | |||
There was a problem hiding this comment.
Where do 121 and 264 come from? These seem like arbitrary numbers. Maybe add a comment indicating what this is actually doing?
There was a problem hiding this comment.
Alignment of the 'x' that shows in chrome and matches the location of it in 4.11
Have added comment
Comment on lines
-194
to
+204
| const style = { paddingLeft: `${this.calculateInputLeftPadding()}px` }; | ||
| const style = { | ||
| paddingLeft: `${this.calculateInputLeftPadding()}px`, | ||
| paddingRight: `${this.calculateInputRightPadding()}px` | ||
| }; |
There was a problem hiding this comment.
Why both left and right, but before it was only doing left padding?
There was a problem hiding this comment.
Right padding was added to fix the bug :-)
There was a problem hiding this comment.
From memory it was because there's an "x" that shows when you type in the text input in chrome, and without the right padding change it was totally out of alignment after the search button text was removed
emteknetnz
force-pushed
the
pulls/1.12/button-resize
branch
from
00c4a37
to
a053b22
Compare
GuySartorelli
approved these changes
Dec 12, 2022
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.
Issue #1398
This SearchBox component already had the ResizeAware functionality applied to it
576px is used elsewhere in the SearchBox component for the 'compact size' version