From cff5c96d820f56e541d57dd498f36d665779bcc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20L=C3=B3pez=20Dato?=
 <rodrigo.lopezdato@flagsmith.com>
Date: Thu, 20 Feb 2025 11:51:33 -0300
Subject: [PATCH] fix: Show "Clear all" to the left of feature filters to
 prevent layout shift (#5143)

---
 frontend/web/components/ClearFilters.tsx      | 2 +-
 frontend/web/components/pages/FeaturesPage.js | 6 +++---
 frontend/web/components/pages/UserPage.tsx    | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/web/components/ClearFilters.tsx b/frontend/web/components/ClearFilters.tsx
index 89a7bd611510..1ef0b48c4c7d 100644
--- a/frontend/web/components/ClearFilters.tsx
+++ b/frontend/web/components/ClearFilters.tsx
@@ -10,7 +10,7 @@ const ClearFilters: FC<ClearFiltersType> = ({ onClick }) => {
   return (
     <div
       onClick={onClick}
-      className='fw-semibold cursor-pointer text-primary  d-flex align-items-center ms-2 gap-1'
+      className='fw-semibold cursor-pointer text-primary  d-flex align-items-center mx-3 gap-1'
     >
       <IonIcon className='h6 mb-0' color='#6837fc' icon={closeCircle} />
       Clear all
diff --git a/frontend/web/components/pages/FeaturesPage.js b/frontend/web/components/pages/FeaturesPage.js
index 6b4a42fb77e4..6731cb83c500 100644
--- a/frontend/web/components/pages/FeaturesPage.js
+++ b/frontend/web/components/pages/FeaturesPage.js
@@ -375,6 +375,9 @@ const FeaturesPage = class extends Component {
                                     value={this.state.search}
                                   />
                                   <Row className='flex-fill justify-content-end'>
+                                    {hasFilters && (
+                                      <ClearFilters onClick={clearFilters} />
+                                    )}
                                     <TableTagFilter
                                       useLocalStorage
                                       isLoading={FeatureListStore.isLoading}
@@ -526,9 +529,6 @@ const FeaturesPage = class extends Component {
                                         this.setState({ sort }, this.filter)
                                       }}
                                     />
-                                    {hasFilters && (
-                                      <ClearFilters onClick={clearFilters} />
-                                    )}
                                   </Row>
                                 </div>
                               </Row>
diff --git a/frontend/web/components/pages/UserPage.tsx b/frontend/web/components/pages/UserPage.tsx
index 7252eacff6b5..fe82bee438b4 100644
--- a/frontend/web/components/pages/UserPage.tsx
+++ b/frontend/web/components/pages/UserPage.tsx
@@ -495,6 +495,9 @@ const UserPage: FC<UserPageType> = (props) => {
                                       value={filter.search}
                                     />
                                     <Row className='flex-fill justify-content-end'>
+                                      {hasFilters && (
+                                        <ClearFilters onClick={clearFilters} />
+                                      )}
                                       <TableTagFilter
                                         projectId={projectId}
                                         className='me-4'
@@ -609,9 +612,6 @@ const UserPage: FC<UserPageType> = (props) => {
                                           })
                                         }}
                                       />
-                                      {hasFilters && (
-                                        <ClearFilters onClick={clearFilters} />
-                                      )}
                                     </Row>
                                   </div>
                                 </Row>