1-3158: more layout tweaking

Unleash · Nov 26, 2024 · 7969bad · 7969bad
1 parent 930a2c8
commit 7969bad
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 15 deletions.
diff --git 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
@@ -4,34 +4,29 @@ 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)<StyledContainerProps>(
-    ({ 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,
     padding: theme.spacing(2, 3, 2, 2),
     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 (
-        <StyledContainer licensedUsersEnabled={licensedUsersEnabled}>
+        <StyledContainer>
             <StyledElement>
                 <InviteLinkBar />
             </StyledElement>