Merge branch 'fix-word-break' into 'develop'

Fix word breaks

See merge request pleroma/pleroma-fe!2129

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/post_status_form/post_status_form.scss

@@ -205,6 +205,7 @@
     min-height: calc(var(--post-line-height) * 1em);
     resize: none;
     background: transparent;
+    text-wrap: stable;
 
     &.scrollable-form {
       overflow-y: auto;

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,10 @@
 
     a {
       display: inline-block;
-      word-break: break-all;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow-x: hidden;
+      width: 100%
     }
   }
 
@@ -283,8 +286,6 @@
 
     & .status-username,
     & .mute-reason {
-      word-wrap: normal;
-      word-break: normal;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;

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);
   }
 
@@ -54,19 +53,22 @@
   }
 
   .text-wrapper {
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    overflow: hidden;
     display: flex;
     flex-flow: column nowrap;
 
     &.-tall-status {
       position: relative;
-      height: 220px;
+      height: 16em;
       overflow: hidden;
       z-index: 1;
 
       .media-body {
         min-height: 0;
         mask:
-          linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
+          linear-gradient(to top, white, transparent) bottom/100% 8em no-repeat,
           linear-gradient(to top, white, white);
 
         /* Autoprefixed seem to ignore this one, and also syntax is different */
@@ -87,16 +89,17 @@
   & .status-unhider,
   & .cw-status-hider {
     display: inline-block;
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
     width: 100%;
     text-align: center;
   }
 
   .tall-status-hider {
     position: absolute;
-    height: 70px;
-    margin-top: 150px;
-    line-height: 110px;
+    height: 5em;
+    margin-top: 10em;
+    line-height: 8em;
     z-index: 2;
   }
 
@@ -107,7 +110,8 @@
 
   & .status-unhider,
   & .cw-status-hider {
-    word-break: break-all;
+    overflow-wrap: break-word;
+    text-wrap: pretty;
 
     svg {
       color: inherit;