Merge branch 'index-spacing-fix' into 'master'

Fix space between login boxes on front page

See merge request !337

frontend/src/routes/frontpage/components/loginpage.tsx

@@ -11,35 +11,30 @@ export default function LoginPage() {
 
   return (
     <Page>
+      <Container
+        sx={{
+          marginTop: '4rem',
+        }}
+      >
+        <Typography variant="h1" sx={{ paddingBottom: '1rem' }}>
+          {t('header')}
+        </Typography>
+        <Typography variant="body1" sx={{ paddingBottom: '2rem' }}>
+          {t('description', { inst: instNameUpperCaser(appInst) })}
+        </Typography>
+      </Container>
       <Container
         maxWidth="md"
         sx={{
           display: 'flex',
-          flexDirection: 'column',
-          marginTop: '4rem',
+          justifyContent: 'space-between',
+          flexDirection: { xs: 'column', md: 'row' },
+          alignItems: 'center',
           marginBottom: '10rem',
         }}
       >
-        <Container>
-          <Typography variant="h1" sx={{ paddingBottom: '1rem' }}>
-            {t('header')}
-          </Typography>
-          <Typography variant="body1" sx={{ paddingBottom: '2rem' }}>
-            {t('description', { inst: instNameUpperCaser(appInst) })}
-          </Typography>
-        </Container>
-
-        <Container
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            flexDirection: { xs: 'column', md: 'row' },
-            alignItems: 'center',
-          }}
-        >
-          <LoginBox header={t('sponsor')} info={t('sponsorInfo')} />
-          <LoginBox header={t('guest')} info={t('guestInfo')} />
-        </Container>
+        <LoginBox header={t('sponsor')} info={t('sponsorInfo')} />
+        <LoginBox header={t('guest')} info={t('guestInfo')} />
       </Container>
     </Page>
   )