From c9e99fca1e564a5d6d872dbe19d9fa2fef6817d1 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 11 Sep 2025 12:10:51 +0200
Subject: [PATCH] refactor: streamline ProjectLifecycleFilters layout and
 improve responsiveness

---
 .../ProjectFeatureToggles.tsx                 | 17 ++++++-------
 .../ProjectLifecycleFilters.tsx               | 24 +++++++++++++------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
index 78b33ad0ec..30cc2531c2 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -42,7 +42,7 @@ import {
     useProjectFeatureSearchActions,
 } from './useProjectFeatureSearch.ts';
 import { AvatarCell } from './AvatarCell.tsx';
-import { Box, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { ConnectSdkDialog } from '../../../onboarding/dialog/ConnectSdkDialog.tsx';
 import { ProjectOnboarding } from '../../../onboarding/flow/ProjectOnboarding.tsx';
@@ -76,7 +76,6 @@ const Container = styled('div')(({ theme }) => ({
 const FilterRow = styled('div')(({ theme }) => ({
     display: 'flex',
     flexFlow: 'row wrap',
-    gap: theme.spacing(2),
     justifyContent: 'space-between',
 }));
 
@@ -578,14 +577,12 @@ export const ProjectFeatureToggles = ({
                             onChange={setTableState}
                             state={filterState}
                         />
-                        <Box sx={{ marginRight: 'auto' }} data-test>
-                            <ProjectLifecycleFilters
-                                projectId={projectId}
-                                state={filterState}
-                                onChange={setTableState}
-                                total={loading ? undefined : total}
-                            />
-                        </Box>
+                        <ProjectLifecycleFilters
+                            projectId={projectId}
+                            state={filterState}
+                            onChange={setTableState}
+                            total={loading ? undefined : total}
+                        />
                         <ButtonGroup>
                             <PermissionIconButton
                                 permission={UPDATE_FEATURE}
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectLifecycleFilters.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectLifecycleFilters.tsx
index eae4c50c11..420ff69578 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectLifecycleFilters.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectLifecycleFilters.tsx
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import type { FilterItemParamHolder } from '../../../filter/Filters/Filters.tsx';
 import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
 import { LifecycleFilters } from '../../../common/LifecycleFilters/LifecycleFilters.tsx';
+import { Box, useMediaQuery, useTheme } from '@mui/material';
 
 interface IProjectLifecycleFiltersProps {
     projectId: string;
@@ -20,6 +21,8 @@ export const ProjectLifecycleFilters: FC<IProjectLifecycleFiltersProps> = ({
     children,
 }) => {
     const { data } = useProjectStatus(projectId);
+    const theme = useTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const lifecycleSummary = Object.entries(
         data?.lifecycleSummary || {},
     ).reduce(
@@ -42,13 +45,20 @@ export const ProjectLifecycleFilters: FC<IProjectLifecycleFiltersProps> = ({
     }
 
     return (
-        <LifecycleFilters
-            state={state}
-            onChange={onChange}
-            total={total}
-            countData={lifecycleSummary}
+        <Box
+            sx={{
+                marginRight: 'auto',
+                margin: isSmallScreen ? theme.spacing(0, 2) : '0 auto 0 0',
+            }}
         >
-            {children}
-        </LifecycleFilters>
+            <LifecycleFilters
+                state={state}
+                onChange={onChange}
+                total={total}
+                countData={lifecycleSummary}
+            >
+                {children}
+            </LifecycleFilters>
+        </Box>
     );
 };