fix: styles

src/features/authentication/components/SubmitSection.tsx

@@ -5,13 +5,30 @@ export function SubmitSection() {
   const { t } = useTranslation('completionForm');
 
   return (
-    <Box sx={{ display: 'flex', gap: 2, px: 6, mb: '17px' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: { xs: 'column', sm: 'row' },
+        alignItems: { xs: 'stretch', sm: 'center' },
+        gap: 2,
+        px: { xs: 2, sm: 4, md: 6 },
+        mb: '17px',
+      }}
+    >
       <Typography variant="body2" sx={{ flex: 1 }} color="text.primary">
         {t('completion.agreementPart1')}
-        <Link target="_blank">{t('completion.agreementLinkText')}</Link>{' '}
+        <Link target="_blank" rel="noopener" href="#">
+          {t('completion.agreementLinkText')}
+        </Link>{' '}
         {t('completion.agreementPart2')}
       </Typography>
-      <Button variant="contained" sx={{ width: '247px' }}>
+      <Button
+        variant="contained"
+        sx={{
+          width: { xs: '100%', sm: '247px' },
+          alignSelf: { xs: 'stretch', sm: 'auto' },
+        }}
+      >
         {t('completion.registerButton')}
       </Button>
     </Box>