mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-23 20:13:21 +03:00
fix: Filter chips lacks width for longer values (#7025)
## Description Closes #7018 - When given longer values, filter chips break-spaces and lack sufficient width - As a result, a design overhaul is given to `StyledBar` and `StyledChipcontainer` components. ## Before - on Desktop <img width="1575" alt="Screenshot 2024-09-15 at 1 19 00 AM" src="https://github.com/user-attachments/assets/f8464c35-01f5-4ad8-8af9-839cd8fa779d"> - On mobile viewport <img width="436" alt="Screenshot 2024-09-15 at 1 19 26 AM" src="https://github.com/user-attachments/assets/8ca3e56f-691f-4064-9886-26d561710d61"> <img width="430" alt="Screenshot 2024-09-15 at 1 19 54 AM" src="https://github.com/user-attachments/assets/3250a19c-f10e-48ac-98a8-f836da0ce53e"> ## After - On desktop <img width="1575" alt="Screenshot 2024-09-15 at 1 20 41 AM" src="https://github.com/user-attachments/assets/0cd08c83-3261-495d-8b63-3f8c4f7fe802"> - On mobile viewport <img width="435" alt="Screenshot 2024-09-15 at 1 25 38 AM" src="https://github.com/user-attachments/assets/ad5d309c-f34f-4001-87bc-96915e9ad484"> https://github.com/user-attachments/assets/0b4ff758-3b6e-4bd5-8247-6b096fa7d1c0 --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
parent
a048436929
commit
711ff5d957
@ -41,6 +41,7 @@ const StyledChip = styled.div<{ variant: SortOrFitlerChipVariant }>`
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
padding: ${({ theme }) => theme.spacing(1) + ' ' + theme.spacing(2)};
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const StyledIcon = styled.div`
|
||||
@ -52,6 +53,7 @@ const StyledIcon = styled.div`
|
||||
const StyledDelete = styled.div<{ variant: SortOrFitlerChipVariant }>`
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: ${({ theme }) => theme.spacing(0.5)};
|
||||
display: flex;
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
|
@ -31,24 +31,27 @@ export type ViewBarDetailsProps = {
|
||||
|
||||
const StyledBar = styled.div`
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
border-top: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
border-top: 1px solid ${({ theme }) => theme.border.color.light};
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-height: 32px;
|
||||
justify-content: space-between;
|
||||
z-index: 4;
|
||||
min-height: 32px;
|
||||
padding-top: ${({ theme }) => theme.spacing(1)};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
||||
z-index: 4;
|
||||
`;
|
||||
|
||||
const StyledChipcontainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: scroll;
|
||||
gap: ${({ theme }) => theme.spacing(1)};
|
||||
min-height: 32px;
|
||||
margin-left: ${({ theme }) => theme.spacing(2)};
|
||||
flex-wrap: wrap;
|
||||
padding-top: ${({ theme }) => theme.spacing(1)};
|
||||
padding-bottom: ${({ theme }) => theme.spacing(0.5)};
|
||||
z-index: 1;
|
||||
`;
|
||||
|
||||
const StyledCancelButton = styled.button`
|
||||
@ -57,15 +60,8 @@ const StyledCancelButton = styled.button`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
cursor: pointer;
|
||||
font-weight: ${({ theme }) => theme.font.weight.medium};
|
||||
margin-left: auto;
|
||||
margin-right: ${({ theme }) => theme.spacing(2)};
|
||||
padding: ${(props) => {
|
||||
const horiz = props.theme.spacing(2);
|
||||
const vert = props.theme.spacing(1);
|
||||
return `${vert} ${horiz} ${vert} ${horiz}`;
|
||||
}};
|
||||
user-select: none;
|
||||
|
||||
margin-right: ${({ theme }) => theme.spacing(2)};
|
||||
&:hover {
|
||||
background-color: ${({ theme }) => theme.background.tertiary};
|
||||
border-radius: ${({ theme }) => theme.spacing(1)};
|
||||
@ -73,8 +69,10 @@ const StyledCancelButton = styled.button`
|
||||
`;
|
||||
|
||||
const StyledFilterContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
`;
|
||||
|
||||
const StyledSeperatorContainer = styled.div`
|
||||
|
Loading…
Reference in New Issue
Block a user