chore: fix weird alignment issue with main content and admin menu (#9636)

frontend/src/component/layout/MainLayout/AdminMenu/AdminMenu.tsx

@@ -5,21 +5,84 @@ import { Sticky } from 'component/common/Sticky/Sticky';
 import { AdminMenuNavigation } from './AdminNavigationItems';
 import { useLocation } from 'react-router-dom';
 
-const StyledAdminMainGrid = styled(Grid)(({ theme }) => ({
+const breakpointLgMinusPadding = 1250;
+const breakpointLgMinusPaddingAdmin = 1550;
+const breakpointXlMinusPadding = 1512;
+const breakpointXlAdmin = 1812;
+const breakpointXxl = 1856;
+const breakpointXxlAdmin = 2156;
+
+const MainLayoutContent = styled(Grid)(({ theme }) => ({
     minWidth: 0, // this is a fix for overflowing flex
-    maxWidth: '1812px',
+    maxWidth: `${breakpointXlMinusPadding}px`,
     margin: '0 auto',
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
-    [theme.breakpoints.up(2156)]: {
+    [theme.breakpoints.up(breakpointXxl)]: {
         width: '100%',
     },
-    [theme.breakpoints.down(2156)]: {
+    [theme.breakpoints.down(breakpointXxl)]: {
+        marginLeft: theme.spacing(7),
+        marginRight: theme.spacing(7),
+    },
+    [theme.breakpoints.down('lg')]: {
+        maxWidth: `${breakpointLgMinusPadding}px`,
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(1),
+    },
+    [theme.breakpoints.down(1024)]: {
+        marginLeft: 0,
+        marginRight: 0,
+    },
+    [theme.breakpoints.down('sm')]: {
+        minWidth: '100%',
+    },
+    minHeight: '94vh',
+}));
+
+const AdminMainLayoutContent = styled(Grid)(({ theme }) => ({
+    minWidth: 0, // this is a fix for overflowing flex
+    maxWidth: `${breakpointXlMinusPadding}px`,
+    margin: '0 auto',
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.up(breakpointXxl)]: {
+        width: '100%',
+    },
+    [theme.breakpoints.down(breakpointXxl)]: {
         marginLeft: 0,
         marginRight: 0,
     },
     [theme.breakpoints.down('lg')]: {
-        maxWidth: '1550px',
+        maxWidth: `${breakpointLgMinusPadding}px`,
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(1),
+    },
+    [theme.breakpoints.down(1024)]: {
+        marginLeft: 0,
+        marginRight: 0,
+    },
+    [theme.breakpoints.down('sm')]: {
+        minWidth: '100%',
+    },
+    minHeight: '94vh',
+}));
+
+const StyledAdminMainGrid = styled(Grid)(({ theme }) => ({
+    minWidth: 0, // this is a fix for overflowing flex
+    maxWidth: `${breakpointXlAdmin}px`,
+    margin: '0 auto',
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.up(breakpointXxlAdmin)]: {
+        width: '100%',
+    },
+    [theme.breakpoints.down(breakpointXxlAdmin)]: {
+        marginLeft: 0,
+        marginRight: 0,
+    },
+    [theme.breakpoints.down('lg')]: {
+        maxWidth: `${breakpointLgMinusPaddingAdmin}px`,
         paddingLeft: theme.spacing(1),
         paddingRight: theme.spacing(1),
     },
@@ -65,10 +128,14 @@ export const WrapIfAdminSubpage = ({ children }: IWrapIfAdminSubpageProps) => {
         location.pathname.indexOf('/admin') === 0;
 
     if (showAdminMenu) {
-        return <AdminMenu>{children}</AdminMenu>;
+        return (
+            <AdminMenu>
+                <AdminMainLayoutContent>{children}</AdminMainLayoutContent>
+            </AdminMenu>
+        );
     }
 
-    return <>{children}</>;
+    return <MainLayoutContent>{children}</MainLayoutContent>;
 };
 
 interface IAdminMenuProps {
@@ -77,7 +144,8 @@ interface IAdminMenuProps {
 
 export const AdminMenu = ({ children }: IAdminMenuProps) => {
     const theme = useTheme();
-    const isBreakpoint = useMediaQuery(theme.breakpoints.down(1350));
+    const isBreakpoint = useMediaQuery(theme.breakpoints.down(1352));
+    const breakpointedSize = isBreakpoint ? 8 : 9;
     const onClick = () => {
         scrollTo({
             top: 0,
@@ -94,7 +162,7 @@ export const AdminMenu = ({ children }: IAdminMenuProps) => {
                     </StyledMenuPaper>
                 </StickyContainer>
             </Grid>
-            <Grid item md={isBreakpoint ? true : 9}>
+            <Grid item md={breakpointedSize}>
                 {children}
             </Grid>
         </StyledAdminMainGrid>

frontend/src/component/layout/MainLayout/MainLayout.tsx

@@ -42,34 +42,6 @@ const MainLayoutContentWrapper = styled('div')(({ theme }) => ({
     position: 'relative',
 }));
 
-const MainLayoutContent = styled(Grid)(({ theme }) => ({
-    minWidth: 0, // this is a fix for overflowing flex
-    maxWidth: '1512px',
-    margin: '0 auto',
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    [theme.breakpoints.up(1856)]: {
-        width: '100%',
-    },
-    [theme.breakpoints.down(1856)]: {
-        marginLeft: theme.spacing(7),
-        marginRight: theme.spacing(7),
-    },
-    [theme.breakpoints.down('lg')]: {
-        maxWidth: '1250px',
-        paddingLeft: theme.spacing(1),
-        paddingRight: theme.spacing(1),
-    },
-    [theme.breakpoints.down(1024)]: {
-        marginLeft: 0,
-        marginRight: 0,
-    },
-    [theme.breakpoints.down('sm')]: {
-        minWidth: '100%',
-    },
-    minHeight: '94vh',
-}));
-
 const StyledImg = styled('img')(() => ({
     display: 'block',
     position: 'fixed',
@@ -147,16 +119,12 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                                 <Header />
 
                                 <WrapIfAdminSubpage>
-                                    <MainLayoutContent>
+                                    <SkipNavTarget />
-                                        <SkipNavTarget />
+                                    <MainLayoutContentContainer ref={ref}>
-                                        <MainLayoutContentContainer ref={ref}>
+                                        <BreadcrumbNav />
-                                            <BreadcrumbNav />
+                                        <Proclamation toast={uiConfig.toast} />
-                                            <Proclamation
+                                        {children}
-                                                toast={uiConfig.toast}
+                                    </MainLayoutContentContainer>
-                                            />
-                                            {children}
-                                        </MainLayoutContentContainer>
-                                    </MainLayoutContent>
                                 </WrapIfAdminSubpage>
                             </Box>
                         </Box>