From ecc99f678bc05a9797c594904e54054c3f7a48c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@live.fr>
Date: Sun, 30 May 2021 11:56:27 +0200
Subject: [PATCH] Add media query to justify teks

---
 components/teks/teks-drawer.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/teks/teks-drawer.js b/components/teks/teks-drawer.js
index 79fcd0e..275f58b 100644
--- a/components/teks/teks-drawer.js
+++ b/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>