From cd02e171cc2cd609da7a7f515b42e75b88f9c709 Mon Sep 17 00:00:00 2001
From: Valera <valera@appsmith.com>
Date: Mon, 20 Feb 2023 11:50:22 +0300
Subject: [PATCH] fix: change word truncate behavior in show more modal
 (#20747)

## Description
Swapping `word-break: break-all;` to `overflow-wrap: break-word;` in the
"Show more" modal.

Before

![2023-02-17_10-54-25](https://user-images.githubusercontent.com/11555074/219649645-e9a83f85-9ef5-4ee6-9a98-22971f374a8a.png)
After
![2023-02-17_10-54-25
2](https://user-images.githubusercontent.com/11555074/219649649-3d4d8079-e52e-4cd2-ab30-7051027bf8a5.png)

Fixes https://github.com/appsmithorg/appsmith/issues/20413

## Type of change
Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?
Manual

## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---
 app/client/src/widgets/TextWidget/component/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/src/widgets/TextWidget/component/index.tsx b/app/client/src/widgets/TextWidget/component/index.tsx
index d2895363c1..7313866e1b 100644
--- a/app/client/src/widgets/TextWidget/component/index.tsx
+++ b/app/client/src/widgets/TextWidget/component/index.tsx
@@ -184,7 +184,7 @@ const Content = styled.div<{
   color: ${(props) => props?.textColor};
   max-height: 70vh;
   overflow: auto;
-  word-break: break-all;
+  overflow-wrap: break-word;
   text-align: ${(props) => props.textAlign.toLowerCase()};
   font-style: ${(props) =>
     props?.fontStyle?.includes(FontStyleTypes.ITALIC) ? "italic" : ""};