From 711ff5d9572fd62ba57830e53bac2ef8740f70a0 Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Tue, 8 Oct 2024 21:09:28 +0530
Subject: [PATCH] fix: Filter chips lacks width for longer values (#7025)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../views/components/SortOrFilterChip.tsx     |  2 ++
 .../views/components/ViewBarDetails.tsx       | 26 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
index 0fab6fffd..8b66bfc32 100644
--- a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
@@ -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)};
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
index e3d443ace..87b16a65f 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
@@ -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`