Fix style issues

Author: NatSquared

web/src/components/appLayouts/AuthenticatedLayout.tsx

@@ -22,22 +22,22 @@ export const AuthenticatedLayout = () => {
                 <InternalHeader />
                 <Notification />
                 <NotificationModal />
-                <Box
-                    component="main"
-                    sx={{ flexGrow: 1, marginTop: { xs: '3.5em', md: '6.5em' }, width: '100%', overflowX: 'auto' }}
+                <ScrollToTop />
+                <FormioListener />
+                <LocalizationProvider
+                    dateFormats={{
+                        keyboardDate: 'YYYY-MM-DD',
+                    }}
+                    dateAdapter={AdapterDayjs}
                 >
-                    <ScrollToTop />
-                    <FormioListener />
-                    <LocalizationProvider
-                        dateFormats={{
-                            keyboardDate: 'YYYY-MM-DD',
-                        }}
-                        dateAdapter={AdapterDayjs}
+                    <Box
+                        component="main"
+                        sx={{ flexGrow: 1, marginTop: { xs: '3.5em', md: '6.5em' }, width: '100%', overflowX: 'auto' }}
                     >
                         <Outlet />
-                    </LocalizationProvider>
-                    <FeedbackModal />
-                </Box>
+                        <FeedbackModal />
+                    </Box>
+                </LocalizationProvider>
             </Box>
             <Box
                 sx={{

web/src/components/appLayouts/SimplifiedLayout.tsx

@@ -24,7 +24,7 @@ export const SimplifiedLayout = () => {
             <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                 <Notification />
                 <NotificationModal />
-                <Box component="main" sx={{ flexGrow: 1, width: '100%', overflowX: 'auto' }}>
+                <Box sx={{ flexGrow: 1, width: '100%', overflowX: 'auto' }}>
                     <ScrollToTop />
                     <FormioListener />
                     <LocalizationProvider dateFormats={{ keyboardDate: 'YYYY-MM-DD' }} dateAdapter={AdapterDayjs}>

web/src/components/common/Input/TextInput.tsx

@@ -90,6 +90,7 @@ export const TextInput: React.FC<TextInputProps> = ({
                 border: 'none',
                 ...inputProps,
                 sx: {
+                    padding: 0,
                     '&::placeholder': {
                         color: colors.type.regular.secondary,
                     },

web/src/components/engagement/admin/view/index.tsx

@@ -61,8 +61,9 @@ const AdminEngagementView = () => {
                                 justifyContent: 'flex-start',
                                 borderBottom: '2px solid',
                                 borderBottomColor: 'gray.60',
-                                width: 'calc(100% - 7.75rem)',
+                                width: '100%',
                                 minWidth: 'max-content',
+                                maxWidth: '700px',
                             },
                         }}
                     >

web/src/components/engagement/public/view/index.tsx

@@ -22,14 +22,14 @@ export const PublicEngagementView = () => {
     const { slug, engagementId, language } = useParams();
     const viewKey = `${slug ?? engagementId ?? 'engagement'}-${language ?? 'default'}`;
     return (
-        <main key={viewKey}>
+        <React.Fragment key={viewKey}>
             <EngagementHero />
             <EngagementDescription />
             <EngagementDetailsTabs />
             <EngagementSurveyBlock />
             <EngagementSubscribeBlock />
             <SuggestedEngagements />
-        </main>
+        </React.Fragment>
     );
 };
 

web/src/components/language/index.tsx

@@ -86,7 +86,7 @@ const LanguageAdminPanel = () => {
     }, []);
 
     return (
-        <ResponsiveContainer component="main" data-testid="language-admin-panel">
+        <ResponsiveContainer data-testid="language-admin-panel">
             <AutoBreadcrumbs />
             <Grid size={12}>
                 <Heading1>Languages</Heading1>

web/src/components/layout/Header/EnvironmentBanner.tsx

@@ -25,6 +25,7 @@ const EnvironmentBanner = () => {
             borderColor="warning.main"
             textAlign="left"
             alignItems="center"
+            flexWrap="nowrap"
             lineHeight="28px"
         >
             <BodyText component="span" fontSize="22px" color="warning.dark">

web/src/styles/Theme.tsx

@@ -582,8 +582,8 @@ export const AdminDarkTheme = createTheme({
         ...DarkTheme.palette,
     },
     components: {
-        ...DarkTheme.components,
         ...AdminTheme.components,
+        ...DarkTheme.components,
     },
 });