fix: user header layout on narrow screens

frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx

@@ -1,6 +1,15 @@
 import type { VFC } from 'react';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { InviteLinkBarContent } from './InviteLinkBarContent';
+import { styled } from '@mui/material';
+
+const Bar = styled('article')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'row wrap',
+    gap: theme.spacing(2),
+    justifyContent: 'space-between',
+    alignItems: 'center',
+}));
 
 export const InviteLinkBar: VFC = () => {
     const { trackEvent } = usePlausibleTracker();
@@ -14,5 +23,9 @@ export const InviteLinkBar: VFC = () => {
         });
     };
 
-    return <InviteLinkBarContent onActionClick={onInviteLinkActionClick} />;
+    return (
+        <Bar>
+            <InviteLinkBarContent onActionClick={onInviteLinkActionClick} />
+        </Bar>
+    );
 };

frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx

@@ -7,7 +7,6 @@ import { LinkField } from '../LinkField/LinkField';
 import { add, formatDistanceToNowStrict, isAfter, parseISO } from 'date-fns';
 import { formatDateYMD } from 'utils/formatDate';
 import { useLocationSettings } from 'hooks/useLocationSettings';
-import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IInviteLinkBarContentProps {
     onActionClick?: (inviteLink?: string) => void;
@@ -23,19 +22,12 @@ export const StyledBox = styled(Box)(() => ({
     flexDirection: 'column',
 }));
 
-export const StyledButtonBox = styled(Box)(() => ({
-    display: 'flex',
-    alignItems: 'center',
-    flexGrow: 1,
-}));
-
 export const InviteLinkBarContent = ({
     onActionClick,
 }: IInviteLinkBarContentProps) => {
     const navigate = useNavigate();
     const { data, loading } = useInviteTokens();
     const ref = useLoading(loading);
-    const { trackEvent } = usePlausibleTracker();
     const inviteToken =
         data?.tokens?.find((token) => token.name === 'default') ?? null;
     const inviteLink = inviteToken?.url;
@@ -110,22 +102,13 @@ export const InviteLinkBarContent = ({
                     }
                 />
             </StyledBox>
-            <StyledButtonBox
-                sx={{
-                    justifyContent: {
-                        xs: 'center',
-                        md: 'flex-end',
-                    },
-                }}
+            <Button
+                variant='outlined'
+                onClick={onInviteLinkActionClick}
+                data-loading
             >
-                <Button
-                    variant='outlined'
-                    onClick={onInviteLinkActionClick}
-                    data-loading
-                >
-                    {inviteLink ? 'Update' : 'Create'} invite link
-                </Button>
-            </StyledButtonBox>
+                {inviteLink ? 'Update' : 'Create'} invite link
+            </Button>
         </>
     );
 };

frontend/src/component/admin/users/UsersHeader/LicensedUsersBox.tsx

@@ -1,58 +1,51 @@
-import { Box, Button, styled, Typography } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import { useState } from 'react';
 import { LicensedUsersSidebar } from './LicensedUsersSidebar';
 
-const StyledContainer = styled(Box)(({ theme }) => ({
+const StyledButton = styled('button')(({ theme }) => ({
+    background: 'none',
+    border: 'none',
+    fontSize: 'inherit',
+    textDecoration: 'underline',
+    color: theme.palette.primary.main,
+    cursor: 'pointer',
+    padding: 0,
+    textAlign: 'left',
+}));
+
+const TopRow = styled('div')(({ theme }) => ({
     display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    gap: theme.spacing(2),
 }));
 
-const StyledColumn = styled(Box)({
+const StyledCaption = styled('figcaption')(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
     display: 'flex',
-    flexDirection: 'column',
-});
-
-const RightColumn = styled(StyledColumn)({
-    alignItems: 'flex-end',
-});
+    flexFlow: 'row wrap',
+    gap: theme.spacing(1),
+    justifyContent: 'space-between',
+}));
 
-const StyledButton = styled(Button)(({ theme }) => ({
-    fontSize: theme.spacing(1.75),
-    textDecoration: 'underline',
-    textAlign: 'right',
-    '&:hover': {
-        backgroundColor: theme.palette.background.paper,
-    },
-    fontWeight: theme.typography.h4.fontWeight,
+const Figure = styled('figure')(({ theme }) => ({
+    margin: 0,
+    display: 'flex',
+    flexFlow: 'column',
+    justifyContent: 'center',
 }));
 
-const InvisibleParagraph = styled('p')({
-    display: 'contents',
-});
+const MainMetric = styled('span')(({ theme }) => ({
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: 'bold',
+}));
 
 export const LicensedUsersBox = () => {
     const [licensedUsersChartOpen, setLicensedUsersChartOpen] = useState(false);
     return (
-        <StyledContainer>
-            <StyledColumn>
-                <InvisibleParagraph>
-                    <Typography
-                        variant='body1'
-                        fontWeight='bold'
-                        component='span'
-                    >
-                        11/25
-                    </Typography>
-                    <Typography variant='body2' component='span'>
-                        Seats used last 30 days
-                    </Typography>
-                </InvisibleParagraph>
-            </StyledColumn>
-            <RightColumn>
+        <Figure>
+            <TopRow>
+                <MainMetric>11/25</MainMetric>
                 <HelpIcon
                     htmlTooltip
                     tooltip={
@@ -63,19 +56,22 @@ export const LicensedUsersBox = () => {
                         </Box>
                     }
                 />
+            </TopRow>
 
+            <StyledCaption>
+                <span>Seats used in the last 30 days</span>
                 <StyledButton
                     onClick={() => {
                         setLicensedUsersChartOpen(true);
                     }}
                 >
                     View graph over time
                 </StyledButton>
-                <LicensedUsersSidebar
-                    open={licensedUsersChartOpen}
-                    close={() => setLicensedUsersChartOpen(false)}
-                />
-            </RightColumn>
-        </StyledContainer>
+            </StyledCaption>
+            <LicensedUsersSidebar
+                open={licensedUsersChartOpen}
+                close={() => setLicensedUsersChartOpen(false)}
+            />
+        </Figure>
     );
 };

frontend/src/component/admin/users/UsersHeader/UsersHeader.tsx

@@ -4,26 +4,23 @@ 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`,
-    display: 'flex',
     border: '2px solid',
-    borderColor: theme.palette.background.alternative,
+    borderColor: theme.palette.divider,
+    flex: 'auto',
+    display: 'flex',
+    flexFlow: 'column',
+    justifyContent: 'center',
 }));
 
 export const UsersHeader = () => {
@@ -32,7 +29,7 @@ export const UsersHeader = () => {
     const licensedUsersEnabled = licensedUsers && !isOss();
 
     return (
-        <StyledContainer licensedUsersEnabled={licensedUsersEnabled}>
+        <StyledContainer>
             <StyledElement>
                 <InviteLinkBar />
             </StyledElement>