Issue/20

src/components/fieldsAnswerForm/FormFieldCheckbox.js

@@ -100,7 +100,11 @@ function FormFieldCheckbox(props) {
   const options = props.options.map((x, index) => {
     return (
       <span>
-        <Typography className={classes.text} variant="h7">
+        <Typography
+          style={{ wordWrap: "break-word" }}
+          className={classes.text}
+          variant="h7"
+        >
           {x.value}
         </Typography>
         <Checkbox onChange={() => handleArray(index)} />
@@ -117,10 +121,16 @@ function FormFieldCheckbox(props) {
     <Paper className={classes.paper}>
       <Grid container>
         <Grid item xs={12} className={classes.questionsGrid}>
-          <Typography className={classes.text} variant="h6">
+          <Typography
+            style={{ wordWrap: "break-word" }}
+            className={classes.text}
+            variant="h6"
+          >
             {props.question}
           </Typography>
-          <Typography variant="h8">{props.description}</Typography>
+          <Typography style={{ wordWrap: "break-word" }} variant="h8">
+            {props.description}
+          </Typography>
         </Grid>
         <Grid
           item
@@ -133,7 +143,12 @@ function FormFieldCheckbox(props) {
         >
           {options}
           <div>
-            <Typography className={classes.validation}>{valid}</Typography>
+            <Typography
+              style={{ wordWrap: "break-word" }}
+              className={classes.validation}
+            >
+              {valid}
+            </Typography>
           </div>
         </Grid>
       </Grid>