twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-24 12:34:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: Filter chips lacks width for longer values (#7025)

Browse Source 
## 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:
Harshit Singh 2024-10-08 21:09:28 +05:30 committed by GitHub
parent a048436929
commit 711ff5d957
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
View File

@ -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)};

26
packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
View File

@ -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`