From 8c53585bd708e73e6eb14c8887b4e7007ce8a571 Mon Sep 17 00:00:00 2001
From: George Gevoian <george@gevoian.com>
Date: Fri, 12 Apr 2024 10:00:05 -0700
Subject: [PATCH] (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 | 3 +++
 app/client/components/Forms/styles.ts    | 4 ++++
 app/client/ui2018/modals.ts              | 1 +
 3 files changed, 8 insertions(+)

diff --git a/app/client/components/FormRendererCss.ts b/app/client/components/FormRendererCss.ts
index 461ddff9..3dcccf34 100644
--- a/app/client/components/FormRendererCss.ts
+++ b/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;
   }
 `);
 
diff --git a/app/client/components/Forms/styles.ts b/app/client/components/Forms/styles.ts
index 6b5fa8d0..e75578bd 100644
--- a/app/client/components/Forms/styles.ts
+++ b/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;
   }
diff --git a/app/client/ui2018/modals.ts b/app/client/ui2018/modals.ts
index 4ed74ab6..f0bb242d 100644
--- a/app/client/ui2018/modals.ts
+++ b/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', `