Fix country selector text overflow issue #8125
Conversation
|
Hey @Devessier, what do you think about this? |
|
Hey @BKM14, thank you very much for your contribution. I made some changes to minimize the number of files that were changed. These files are often used across the application, and we can easily break something if we make a mistake. |
|
Yeah, I knew it was a little shabby given the number of files I had to change. I spent a whole day breaking my head trying to fix this. Glad you minimized the changes. |
| </StyledControlLabel> | ||
| </StyledIconContainer> | ||
| ) : null} | ||
| <StyledLabel>{selectedOption.label}</StyledLabel> |
There was a problem hiding this comment.
would it make sense to use OverflowingTextWithTooltipe here?
There was a problem hiding this comment.
Done! It works great. However, I'm not sure how accessible using this component here is.
| `; | ||
|
|
||
| const StyledIconChevronDown = styled(IconChevronDown)<{ | ||
| disabled?: boolean; | ||
| }>` | ||
| color: ${({ disabled, theme }) => | ||
| disabled ? theme.font.color.extraLight : theme.font.color.tertiary}; | ||
| flex-shrink: 0; |
There was a problem hiding this comment.
are all these flex-shrink mandatory? looks a bit too much everywhere
There was a problem hiding this comment.
I cleaned the layouting by using a unified grid layout.
| `; | ||
|
|
||
| const StyledLabel = styled.span` | ||
| flex-grow: 1; |
There was a problem hiding this comment.
is this flex-grow necessary?
This code looks very similar to OverflowingTextWithTooltip
|
Thank you a lot for your time, @BKM14. I know truncating text can be tricky. The root issue was that the modal had no max-width, making it hard to truncate text, which requires setting a max-width beyond which the text should be truncated. |
|
Awarding BKM14: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/BKM14 |
Fixes:  The regression is due a recent change I made to the SelectControl component: #8125. The SelectControls get applied `text-align: center` due to the styles `react-datepicker` applies to the header component. My grid implementation makes the label take all the available width. I could have let it take an `auto` width, but I think it's better to set the `text-align` property and ensure the `SelectControl` component behaves predictably.
Closes #7906
Modified the two children(
TextInputV2andCountrySelect) in theStyledHalfRowContainercomponent to always be equal in size and divide the available space equally.The
StyledIconChevronDowncomponent has aflex-shrink: 0to prevent it from completely disappearing. The same applies for theselectedOption.Icon.A
ptag had to be added to the label to correctly handle the text overflow.