fix: dashboard layout (#6063)

Align widgets properly on main screen. Responsive view in next PRs

frontend/src/component/executiveDashboard/ExecutiveDashboard.tsx

@@ -11,7 +11,7 @@ const StyledGrid = styled(Box)(({ theme }) => ({
     display: 'grid',
     gridTemplateColumns: `300px 1fr`,
     // TODO: responsive grid size
-    gridAutoRows: '1fr',
+    gridAutoRows: 'auto',
     gap: theme.spacing(2),
 }));
 
@@ -31,11 +31,10 @@ export const ExecutiveDashboard: VFC = () => {
             </Box>
             <StyledGrid>
                 <UserStats />
-                <FlagStats />
                 <UsersChart
                     userTrends={executiveDashboardData?.userTrends ?? []}
                 />
-                <Paper>Stats</Paper>
+                <FlagStats />
                 <FlagsChart
                     flagsTrends={executiveDashboardData?.flagsTrends ?? []}
                 />

frontend/src/component/executiveDashboard/FlagsChart/FlagsChartComponent.tsx

@@ -12,7 +12,7 @@ import {
 } from 'chart.js';
 import { Line } from 'react-chartjs-2';
 import 'chartjs-adapter-date-fns';
-import { Paper, Theme, useTheme } from '@mui/material';
+import { Paper, Theme, Typography, useTheme } from '@mui/material';
 import {
     useLocationSettings,
     type ILocationSettings,
@@ -54,20 +54,6 @@ const createOptions = (theme: Theme, locationSettings: ILocationSettings) =>
     ({
         responsive: true,
         plugins: {
-            title: {
-                text: 'Number of flags',
-                position: 'top',
-                align: 'start',
-                display: true,
-                font: {
-                    size: 16,
-                    weight: '400',
-                },
-                padding: {
-                    bottom: 24,
-                },
-                color: theme.palette.text.primary,
-            },
             legend: {
                 position: 'bottom',
             },
@@ -132,6 +118,12 @@ const FlagsChartComponent: VFC<IFlagsChartComponentProps> = ({
 
     return (
         <Paper sx={(theme) => ({ padding: theme.spacing(4) })}>
+            <Typography
+                variant='h3'
+                sx={(theme) => ({ marginBottom: theme.spacing(3) })}
+            >
+                Number of flags
+            </Typography>
             <Line options={options} data={data} />
         </Paper>
     );

frontend/src/component/executiveDashboard/UserStats/UserStats.tsx

@@ -75,8 +75,6 @@ const StyledLink = styled(Link)({
 
 export const UserStats = () => {
     return (
-        <>
-            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <StyledContent>
             <StyledHeader variant='h1'>Total users</StyledHeader>
             <StyledUserContainer>
@@ -109,8 +107,6 @@ export const UserStats = () => {
                 </StyledLink>
             </StyledLinkContainer>
         </StyledContent>
-            </Box>
-        </>
     );
 };
 
@@ -204,7 +200,6 @@ const UserDistributionInfo: React.FC<IUserDistributionInfoProps> = ({
 }) => {
     return (
         <StyledUserDistContainer>
-            <Box sx={{ display: 'flex' }}>
             <StyledUserDistIndicator type={type} />
             <StyledDistInfoInnerContainer>
                 <StyledDistInfoTextContainer>
@@ -217,7 +212,6 @@ const UserDistributionInfo: React.FC<IUserDistributionInfoProps> = ({
                     {count}
                 </StyledCountTypography>
             </StyledDistInfoInnerContainer>
-            </Box>
         </StyledUserDistContainer>
     );
 };