Add media query to justify teks

components/teks/teks-drawer.js

@@ -11,7 +11,8 @@ import {
   Drawer,
   Hidden,
   IconButton,
-  Box
+  Box,
+  useMediaQuery
 } from '@material-ui/core'
 
 import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace'
@@ -125,6 +126,7 @@ const langToArray = anTeks => {
 }
 
 export default function TeksDrawer({teks, anTeks}) {
+  const isMobile = useMediaQuery('(max-width:800px)')
   const langArray = langToArray(anTeks)
   const classes = useStyles()
   const theme = useTheme()
@@ -230,7 +232,7 @@ export default function TeksDrawer({teks, anTeks}) {
                   <Typography align='center' className={classes.text} variant='h4'>
                     Transcription
                   </Typography>
-                  <Typography paragraph align={langArray.length === 0 ? 'center' : 'justify'} component='span'>
+                  <Typography paragraph align={langArray.length === 0 && isMobile ? 'justify' : 'center'} component='span'>
                     {formatJsonString(anTeks.transkripsyon)}
                   </Typography>
                 </div>