admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix country selector text overflow issue (#8125)

Browse Source 
Closes #7906 

Modified the two children(`TextInputV2` and `CountrySelect`) in the
`StyledHalfRowContainer` component to always be equal in size and divide
the available space equally.
The `StyledIconChevronDown` component has a `flex-shrink: 0` to prevent
it from completely disappearing. The same applies for the
`selectedOption.Icon`.
A `p` tag had to be added to the label to correctly handle the text
overflow.

---------

Co-authored-by: Devessier <baptiste@devessier.fr>
This commit is contained in:
Balaji Krishnamurthy
2024-10-28 20:50:29 +05:30
committed by GitHub
parent 2ba98ddadd
commit ca54bc1813
2 changed files with 33 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
View File

@ -19,13 +19,13 @@ const StyledAddressContainer = styled.div`
padding: 4px 8px;
width: 100%;
min-width: 260px;
width: 344px;
> div {
margin-bottom: 6px;
}
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: auto;
min-width: 100px;
max-width: 200px;
overflow: hidden;
@ -36,7 +36,8 @@ const StyledAddressContainer = styled.div`
`;
const StyledHalfRowContainer = styled.div`
display: flex;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
@media (max-width: ${MOBILE_VIEWPORT}px) {