Merge pull request #1776 from AletheiaFact/bug-layout-container

fixed layout issue in the form containers.

Author: thesocialdev

src/components/Form/DynamicForm.tsx

@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material"
+import { Grid } from "@mui/material";
 
 import { Controller } from "react-hook-form";
 import DynamicInput from "./DynamicInput";
@@ -44,7 +44,14 @@ const DynamicForm = ({
                                 {t(label)}
                             </h4>
                         </Grid>
-                        <Grid item xs={12} style={{ margin: "10px 0" }}>
+                        <Grid
+                            item
+                            xs={12}
+                            style={{
+                                margin: "10px 0",
+                                wordBreak: "break-word",
+                            }}
+                        >
                             <Controller
                                 name={fieldName}
                                 control={control}

src/components/SentenceReport/SentenceReportContent.style.tsx

@@ -2,6 +2,8 @@ import styled from "styled-components";
 
 const SentenceReportContentStyle = styled.div`
     margin: 10px 0;
+    word-break: break-word;
+
     .title {
         font-size: 16px;
         font-weight: 700;
@@ -10,7 +12,6 @@ const SentenceReportContentStyle = styled.div`
 
     .paragraph {
         font-size: 18px;
-        word-break: "break-all";
     }
 `;