fix: Show "Clear all" to the left of feature filters to prevent layou…

…t shift (#5143)
Flagsmith · Feb 20, 2025 · cff5c96 · cff5c96
1 parent 37c0878
commit cff5c96
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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>