diff --git a/frontend/src/components/identityLine/index.tsx b/frontend/src/components/identityLine/index.tsx index 8c8a2f821c43e3fba9448c4576232575138a1fd4..bd90134c416aca835cbe3dd3c660a7ee8cd57a06 100644 --- a/frontend/src/components/identityLine/index.tsx +++ b/frontend/src/components/identityLine/index.tsx @@ -1,4 +1,4 @@ -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> ) diff --git a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx index 3aee82c68dedd4a9d96bccd1b642e5b5860a5c35..28c1cd680e45fbb4b2ba21f9fa00c6eac472f733 100644 --- a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx +++ b/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')}