From 0c4a9841109a6cb59941cae600e6293ae5e47ec8 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Fri, 28 Feb 2025 11:39:59 +0100
Subject: [PATCH] Fixed view bar chips margin and gaps (#10575)

This PR fixed ViewBar chips that were using margin instead of padding
and gaps.

This SortOrFilter chip was using margin left to space itself where it
was the role of the view bar to handle gap between chips and
padding-left at the beginning.
---
 .../src/modules/views/components/SortOrFilterChip.tsx     | 2 --
 .../src/modules/views/components/ViewBarDetails.tsx       | 8 +++++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
index d83f29c7f..b92bbb07e 100644
--- a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
@@ -46,8 +46,6 @@ const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>`
   column-gap: ${({ theme }) => theme.spacing(1)};
   user-select: none;
   white-space: nowrap;
-
-  margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
 const StyledIcon = styled.div`
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
index e279270f7..4fbf82de5 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
@@ -25,9 +25,9 @@ import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
 
 import { isViewBarExpandedComponentState } from '@/views/states/isViewBarExpandedComponentState';
+import { t } from '@lingui/core/macro';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared';
-import { t } from '@lingui/core/macro';
 
 export type ViewBarDetailsProps = {
   hasFilterButton?: boolean;
@@ -48,6 +48,7 @@ const StyledBar = styled.div`
   min-height: 32px;
   padding-top: ${({ theme }) => theme.spacing(1)};
   padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
   z-index: 4;
 `;
 
@@ -56,7 +57,7 @@ const StyledChipcontainer = styled.div`
   display: flex;
   flex-direction: row;
   overflow: scroll;
-  gap: ${({ theme }) => theme.spacing(1)};
+  gap: ${({ theme }) => theme.spacing(2)};
   padding-top: ${({ theme }) => theme.spacing(1)};
   z-index: 1;
 `;
@@ -80,6 +81,8 @@ const StyledFilterContainer = styled.div`
   align-items: center;
   flex: 1;
   overflow-x: hidden;
+
+  gap: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledSeperatorContainer = styled.div`
@@ -99,7 +102,6 @@ const StyledSeperator = styled.div`
 `;
 
 const StyledAddFilterContainer = styled.div`
-  margin-left: ${({ theme }) => theme.spacing(1)};
   z-index: 5;
 `;