fix word breaks

src/components/attachment/attachment.scss

@@ -177,7 +177,8 @@
     .text {
       flex: 2;
       margin: 8px;
-      word-break: break-all;
+      overflow-wrap: break-word;
+      text-wrap: pretty;
 
       h1 {
         font-size: 1rem;

src/components/chat_list_item/chat_list_item.scss

@@ -17,7 +17,6 @@
     width: 100%;
     box-sizing: border-box;
     overflow: hidden;
-    word-wrap: break-word;
   }
 
   .heading {

src/components/chat_title/chat_title.vue

@@ -39,7 +39,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     display: inline;
-    word-wrap: break-word;
     overflow: hidden;
   }
 

src/components/draft/draft.vue

@@ -127,7 +127,6 @@
     max-width: 100%;
 
     p {
-      word-wrap: break-word;
       white-space: normal;
       overflow-x: hidden;
     }

src/components/flash/flash.vue

@@ -72,7 +72,6 @@
     flex: 1 1 0;
     line-height: 1.2;
     white-space: normal;
-    word-wrap: normal;
   }
 
   .hidden {

src/components/link-preview/link-preview.vue

@@ -68,7 +68,8 @@
     margin: 0.5em 0 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
     line-height: 1.2em;
 
     /* cap description at 3 lines, the 1px is to clean up some stray pixels

src/components/media_modal/media_modal.vue

@@ -170,7 +170,8 @@ $modal-view-button-icon-margin: 0.5em;
     min-height: 1em;
     max-width: 500px;
     max-height: 9.5em;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
   }
 
   .modal-image {

src/components/mention_link/mention_link.scss

@@ -27,7 +27,6 @@
     top: 100%;
     left: 0;
     height: 100%;
-    word-wrap: normal;
     white-space: nowrap;
     transition: opacity 0.2s ease;
     z-index: 1;

src/components/mentions_line/mentions_line.scss

@@ -1,5 +1,6 @@
 .MentionsLine {
-  word-break: break-all;
+  overflow-wrap: break-word;
+  text-wrap: pretty;
 
   .mention-link:not(:first-child)::before {
     content: " ";

src/components/notification/notification.scss

@@ -2,8 +2,8 @@
 .Notification {
   border-bottom: 1px solid;
   border-color: var(--border);
-  word-wrap: break-word;
-  word-break: break-all;
+  overflow-wrap: break-word;
+  text-wrap: pretty;
 
   &.Status {
     /* stylelint-disable-next-line declaration-no-important */
@@ -31,8 +31,6 @@
     & .status-username,
     & .mute-thread,
     & .mute-words {
-      word-wrap: normal;
-      word-break: normal;
       white-space: nowrap;
     }
 

src/components/notifications/notifications.scss

@@ -128,7 +128,6 @@
 
   .notification-details {
     min-width: 0;
-    word-wrap: break-word;
     line-height: var(--post-line-height);
     position: relative;
     overflow: hidden;
@@ -161,7 +160,8 @@
     }
 
     h1 {
-      word-break: break-all;
+      overflow-wrap: break-word;
+      text-wrap: pretty;
       margin: 0 0 0.3em;
       padding: 0;
       font-size: 1em;

src/components/poll/poll.scss

@@ -26,7 +26,8 @@
     align-items: center;
     padding: 0.1em 0.25em;
     z-index: 1;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
   }
 
   .result-percentage {

src/components/status/status.scss

@@ -1,8 +1,8 @@
 .Status {
   min-width: 0;
   white-space: normal;
-  word-wrap: break-word;
-  word-break: break-all;
+  overflow-wrap: break-word;
+  text-wrap: pretty;
 
   &:hover {
     --_still-image-img-visibility: visible;
@@ -92,7 +92,8 @@
 
     a {
       display: inline-block;
-      word-break: break-all;
+      overflow-wrap: break-word;
+      text-wrap: pretty;
     }
   }
 
@@ -283,7 +284,7 @@
 
     & .status-username,
     & .mute-reason {
-      word-wrap: normal;
+      
       word-break: normal;
       white-space: nowrap;
       text-overflow: ellipsis;

src/components/status_body/status_body.scss

@@ -14,8 +14,7 @@
   & .summary {
     white-space: pre-wrap;
     overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-all;
+    text-wrap: pretty;
     line-height: var(--post-line-height);
   }
 
@@ -87,7 +86,8 @@
   & .status-unhider,
   & .cw-status-hider {
     display: inline-block;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
     width: 100%;
     text-align: center;
   }
@@ -107,7 +107,8 @@
 
   & .status-unhider,
   & .cw-status-hider {
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
 
     svg {
       color: inherit;