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
This commit is contained in:
Valera 2023-02-20 11:50:22 +03:00 committed by GitHub
parent 33940ea348
commit cd02e171cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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" : ""};