Tab orientation vertical when mobile device (#890)

* tab orientation vertical when mobile device
* fixed: tab text alignment

src/components/one-time-donation/steps/SecondStep.tsx

@@ -1,6 +1,6 @@
 import { TabContext, TabList } from '@mui/lab'
 import TabPanel from '@mui/lab/TabPanel'
-import { Box, Tab, Typography } from '@mui/material'
+import { Box, Tab, Typography, useMediaQuery } from '@mui/material'
 import { useTranslation } from 'next-i18next'
 import React, { useState } from 'react'
 import AnonymousMenu from '../AnonymousForm'
@@ -9,6 +9,7 @@ import RegisterForm from '../RegisterDialog'
 
 export default function SecondStep() {
   const { t } = useTranslation('one-time-donation')
+  const mobile = useMediaQuery('(max-width:575px)')
 
   const [value, setValue] = useState('1')
 
@@ -21,7 +22,13 @@ export default function SecondStep() {
       <Typography variant="h4">{t('step-labels.personal-profile')}</Typography>
       <Typography>{t('second-step.intro-text')}</Typography>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <TabList value={value} onChange={handleChange} aria-label="personal info">
+        <TabList
+          variant="fullWidth"
+          orientation={mobile ? 'vertical' : 'horizontal'}
+          centered
+          value={value}
+          onChange={handleChange}
+          aria-label="personal info">
           <Tab label={t('second-step.login')} value="1" />
           <Tab label={t('second-step.new-create-profile')} value="2" />
           <Tab label={t('second-step.donate-anonymously')} value="3" />