(core) Break overflowing text

Summary: Text could overflow its container in a few instances.

Test Plan: Manual.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D4231

app/client/components/FormRendererCss.ts

@@ -12,6 +12,8 @@ export const label = styled('div', `
 `);
 
 export const paragraph = styled('div', `
+  overflow-wrap: break-word;
+
   &-alignment-left {
     text-align: left;
   }
@@ -176,6 +178,7 @@ export const field = styled('div', `
     margin-top: 8px;
     margin-bottom: 8px;
     display: block;
+    overflow-wrap: break-word;
   }
 `);
 

app/client/components/Forms/styles.ts

@@ -133,6 +133,8 @@ export const cssQuestion = styled('div', `
 export const cssRequiredWrapper = styled('div', `
   margin: 8px 0px;
   min-height: 16px;
+  overflow-wrap: break-word;
+
   &-required {
     display: grid;
     grid-template-columns: auto 1fr;
@@ -426,6 +428,8 @@ export const cssSmallButton = styled(basicButton, `
 export const cssMarkdownRendered = styled('div', `
   min-height: 1.5rem;
   font-size: 15px;
+  overflow-wrap: break-word;
+
   & textarea {
     font-size: 15px;
   }

app/client/ui2018/modals.ts

@@ -618,6 +618,7 @@ export const cssModalTitle = styled('div', `
 export const cssModalBody = styled('div', `
   color: ${theme.text};
   margin: 16px 0;
+  overflow-wrap: break-word;
 `);
 
 export const cssModalButtons = styled('div', `