From 1d6f1f455169e6570d5a69ebd7b94234035e6763 Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Fri, 9 Jun 2023 11:07:11 +0200
Subject: [PATCH] Fixed space between filter & sort button is too large (#259)

Fixed filters CSS
---
 .../ui/components/table/table-header/DropdownButton.tsx      | 5 ++++-
 .../modules/ui/components/table/table-header/TableHeader.tsx | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/front/src/modules/ui/components/table/table-header/DropdownButton.tsx b/front/src/modules/ui/components/table/table-header/DropdownButton.tsx
index 67af7d23d..dbf0ca610 100644
--- a/front/src/modules/ui/components/table/table-header/DropdownButton.tsx
+++ b/front/src/modules/ui/components/table/table-header/DropdownButton.tsx
@@ -31,12 +31,15 @@ type StyledDropdownButtonProps = {
 
 const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
   display: flex;
-  margin-left: ${(props) => props.theme.spacing(3)};
   cursor: pointer;
   user-select: none;
   background: ${(props) => props.theme.primaryBackground};
   color: ${(props) => (props.isActive ? props.theme.blue : 'none')};
   padding: ${(props) => props.theme.spacing(1)};
+
+  padding-right: ${(props) => props.theme.spacing(2)};
+  padding-left: ${(props) => props.theme.spacing(2)};
+
   border-radius: 4px;
   filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
 
diff --git a/front/src/modules/ui/components/table/table-header/TableHeader.tsx b/front/src/modules/ui/components/table/table-header/TableHeader.tsx
index 99f06692d..89356db2c 100644
--- a/front/src/modules/ui/components/table/table-header/TableHeader.tsx
+++ b/front/src/modules/ui/components/table/table-header/TableHeader.tsx
@@ -38,7 +38,7 @@ const StyledTableHeader = styled.div`
   color: ${(props) => props.theme.text60};
   font-weight: 500;
   padding-left: ${(props) => props.theme.spacing(3)};
-  padding-right: ${(props) => props.theme.spacing(1)};
+  padding-right: ${(props) => props.theme.spacing(2)};
 `;
 
 const StyledIcon = styled.div`
@@ -57,7 +57,7 @@ const StyledViewSection = styled.div`
 const StyledFilters = styled.div`
   display: flex;
   font-weight: 400;
-  margin-right: ${(props) => props.theme.spacing(2)};
+  gap: 2px;
 `;
 
 export function TableHeader<SortField, TData extends FilterableFieldsType>({