[To Main] Style hotfix for Chromium-based browsers

CHANGELOG.MD

@@ -1,3 +1,9 @@
+## August 6, 2024
+
+- **Hotfix** Fix styling issues with the new admin header - 🎟️ HOTFIX
+  - Fixed an issue where page widths above 100% were causing the header to become misaligned
+  - Fixed a z-index issue with the tenant selector on mobile
+
 ## July 31, 2024
 
 - **Feature** New footer (public and admin) [🎟️ DESENG-662](https://citz-gdx.atlassian.net/browse/DESENG-662)
@@ -7,6 +13,7 @@
 ## July 30, 2024
 
 - **Feature** New admin header [🎟️ DESENG-660](https://citz-gdx.atlassian.net/browse/DESENG-660)
+
   - Added a new API endpoint to fetch a list of a user's tenants, required for the new header
   - Redesigned the admin header to match the new design system
   - Added a new dropdown to the header to allow users to switch between tenants

met-web/src/components/appLayouts/AuthenticatedLayout.tsx

@@ -22,7 +22,10 @@ export const AuthenticatedLayout = () => {
                 <InternalHeader />
                 <Notification />
                 <NotificationModal />
-                <Box component="main" sx={{ flexGrow: 1, marginTop: { xs: '3.5em', md: '6.5em' } }}>
+                <Box
+                    component="main"
+                    sx={{ flexGrow: 1, marginTop: { xs: '3.5em', md: '6.5em' }, width: '100%', overflowX: 'auto' }}
+                >
                     <ScrollToTop />
                     <FormioListener />
                     <LocalizationProvider

met-web/src/components/layout/Header/InternalHeader.tsx

@@ -72,6 +72,7 @@ const InternalHeader = () => {
                     },
                 }}
             >
+                <CssBaseline />
                 <AppBar
                     position="fixed"
                     sx={{
@@ -86,7 +87,6 @@ const InternalHeader = () => {
                     }}
                     data-testid="appbar-header"
                 >
-                    <CssBaseline />
                     <Toolbar
                         sx={{
                             height: '4em',
@@ -132,10 +132,11 @@ const InternalHeader = () => {
                                             transform: `rotate(${sideNavOpen ? '180deg' : '0'})`,
                                             transition: 'transform 0.3s',
                                             position: isMobileScreen ? 'relative' : undefined,
-                                            left: isMobileScreen ? '6px' : undefined,
+                                            right: isMobileScreen ? '6px' : undefined,
                                         }}
                                     />
                                 }
+                                iconPosition="right"
                                 sx={{
                                     marginLeft: 'auto',
                                     minWidth: 'unset',
@@ -269,8 +270,6 @@ const TenantSelector = ({
                     <TenantButtonContent isOpen={tenantDrawerOpen} />
                 </ButtonBase>
                 <Drawer
-                    disableEnforceFocus
-                    disablePortal
                     anchor="top"
                     open={tenantDrawerOpen}
                     onClose={() => {