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} /> - - - + = ({ 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 = ({ } return ( - - {children} - + + {children} + + ); };