GREG-190: Making table scale a bit better on small screens

frontend/src/components/identityLine/index.tsx

-import { Button, TableRow, Typography } from '@mui/material'
+import { Box, Button, TableRow, Typography } from '@mui/material'
 import ConfirmDialog from 'components/confirmDialog'
 import { Identity } from 'interfaces'
 import { useState } from 'react'
@@ -46,33 +46,56 @@ const IdentityLine = ({
   return (
     <TableRow>
       <TableCell align="left">{text}</TableCell>
-      <TableCell align="left">{identity ? identity.value : ''}</TableCell>
-      <TableCell>
-        {!identity.verified_at ? (
-          <Typography>
-            <Button
-              aria-label={t('button.verify')}
-              onClick={() => setConfirmOpen(true)}
-              disabled={
-                !identity ||
-                (disableNinVerification &&
-                  identity.type === 'norwegian_national_id_number')
-              }
-            >
-              {t('button.verify')}
-            </Button>
-            <ConfirmDialog
-              title={t('confirmationDialog.confirmIdentityTitle')}
-              open={confirmOpen}
-              setOpen={setConfirmOpen}
-              onConfirm={verifyIdentity(identity.id)}
-            >
-              {getDialogText()}
-            </ConfirmDialog>
-          </Typography>
-        ) : (
-          <CheckIcon sx={{ fill: (theme) => theme.palette.success.main }} />
-        )}
+      <TableCell align="left">
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', md: 'row' },
+            justifyContent: 'flex-start',
+          }}
+        >
+          {/* Setting flex grow to 1 to push the verify button to the right on large screens */}
+          <Box
+            sx={{
+              flexGrow: 1,
+            }}
+          >
+            {identity ? identity.value : ''}
+          </Box>
+
+          {!identity.verified_at ? (
+            <Box>
+              <Typography>
+                <Button
+                  aria-label={t('button.verify')}
+                  sx={{
+                    alignSelf: { xs: 'auto', md: 'flex-end' },
+                    marginLeft: { xs: '0rem', md: '1rem' },
+                    marginTop: { xs: '0.3rem', md: '0rem' },
+                  }}
+                  onClick={() => setConfirmOpen(true)}
+                  disabled={
+                    !identity ||
+                    (disableNinVerification &&
+                      identity.type === 'norwegian_national_id_number')
+                  }
+                >
+                  {t('button.verify')}
+                </Button>
+                <ConfirmDialog
+                  title={t('confirmationDialog.confirmIdentityTitle')}
+                  open={confirmOpen}
+                  setOpen={setConfirmOpen}
+                  onConfirm={verifyIdentity(identity.id)}
+                >
+                  {getDialogText()}
+                </ConfirmDialog>
+              </Typography>
+            </Box>
+          ) : (
+            <CheckIcon sx={{ fill: (theme) => theme.palette.success.main }} />
+          )}
+        </Box>
       </TableCell>
     </TableRow>
   )

frontend/src/routes/sponsor/guest/guestInfo/index.tsx

@@ -180,11 +180,9 @@ export default function GuestInfo({
           <Table sx={{ minWidth: 650 }} aria-label="simple table">
             <TableHead>
               <TableRow>
-                <TableHeadCell align="left">
+                <TableHeadCell align="left" colSpan={2}>
                   {t('guestInfo.contactInfoTableText')}
                 </TableHeadCell>
-                <TableHeadCell />
-                <TableHeadCell />
               </TableRow>
             </TableHead>
             <TableBody>
@@ -201,7 +199,7 @@ export default function GuestInfo({
                   <Box
                     sx={{
                       display: 'flex',
-                      flexDirection: 'row',
+                      flexDirection: { xs: 'column', md: 'row' },
                       justifyContent: 'flex-start',
                     }}
                   >
@@ -230,19 +228,27 @@ export default function GuestInfo({
                         sx={{
                           display: 'flex',
                           flexDirection: 'row',
-                          justifyContent: 'flex-end',
+                          justifyContent: { xs: 'flex-start', md: 'flex-end' },
                         }}
                       >
                         <Button
                           color="secondary"
-                          sx={{ maxHeight: '2.3rem', marginLeft: '1rem' }}
+                          sx={{
+                            maxHeight: '2.3rem',
+                            marginLeft: { xs: '0rem', md: '1rem' },
+                            marginTop: { xs: '0.3rem', md: '0rem' },
+                          }}
                           onClick={resend}
                         >
                           {t('button.resendInvitation')}
                         </Button>
                         <Button
                           color="secondary"
-                          sx={{ maxHeight: '2.3rem', marginLeft: '0.5rem' }}
+                          sx={{
+                            maxHeight: '2.3rem',
+                            marginLeft: '0.5rem',
+                            marginTop: { xs: '0.3rem', md: '0rem' },
+                          }}
                           onClick={handleCancel}
                         >
                           {t('button.cancelInvitation')}