diff --git a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx index 2ec804bcaf74..c32f82ad8045 100644 --- a/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx +++ b/frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx @@ -5,7 +5,7 @@ import { LicensedUsersSidebar } from './LicensedUsersSidebar'; const StyledContainer = styled(Box)(({ theme }) => ({ display: 'flex', - flexDirection: 'row', + flexFlow: 'row wrap', width: '100%', justifyContent: 'space-between', alignItems: 'center', diff --git a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx index e9ff626a5f11..df55ad62bc63 100644 --- a/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx +++ b/frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx @@ -4,18 +4,12 @@ import { useUiFlag } from 'hooks/useUiFlag'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { LicensedUsersBox } from './LicensedUsersBox'; -interface StyledContainerProps { - licensedUsersEnabled: boolean; -} - -const StyledContainer = styled(Box)( - ({ theme, licensedUsersEnabled }) => ({ - display: 'grid', - gridTemplateColumns: licensedUsersEnabled ? '60% 40%' : '100%', - gap: theme.spacing(2), - paddingBottom: theme.spacing(3), - }), -); +const StyledContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexFlow: 'row', + gap: theme.spacing(2), + paddingBottom: theme.spacing(3), +})); const StyledElement = styled(Box)(({ theme }) => ({ backgroundColor: theme.palette.background.paper, @@ -23,15 +17,16 @@ const StyledElement = styled(Box)(({ theme }) => ({ borderRadius: `${theme.shape.borderRadiusLarge}px`, border: '2px solid', borderColor: theme.palette.divider, + flex: 'auto', })); export const UsersHeader = () => { const licensedUsers = useUiFlag('licensedUsers'); const { isOss } = useUiConfig(); - const licensedUsersEnabled = true; //licensedUsers && !isOss(); + const licensedUsersEnabled = licensedUsers && !isOss(); return ( - +