From 36ce62efab8a6c780270239a31758894e5ba5901 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Apr 2025 10:56:19 +0300 Subject: [PATCH 1/8] fix word breaks --- src/components/attachment/attachment.scss | 3 ++- src/components/chat_list_item/chat_list_item.scss | 1 - src/components/chat_title/chat_title.vue | 1 - src/components/draft/draft.vue | 1 - src/components/flash/flash.vue | 1 - src/components/link-preview/link-preview.vue | 3 ++- src/components/media_modal/media_modal.vue | 3 ++- src/components/mention_link/mention_link.scss | 1 - src/components/mentions_line/mentions_line.scss | 3 ++- src/components/notification/notification.scss | 6 ++---- src/components/notifications/notifications.scss | 4 ++-- src/components/poll/poll.scss | 3 ++- src/components/status/status.scss | 9 +++++---- src/components/status_body/status_body.scss | 9 +++++---- 14 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index 13afbe641..16346c97c 100644 --- a/src/components/attachment/attachment.scss +++ b/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; diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss index 9711b41d6..dcef6380e 100644 --- a/src/components/chat_list_item/chat_list_item.scss +++ b/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 { diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue index 0213b86fb..72660cca0 100644 --- a/src/components/chat_title/chat_title.vue +++ b/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; } diff --git a/src/components/draft/draft.vue b/src/components/draft/draft.vue index 9f8d8c14e..433ebae31 100644 --- a/src/components/draft/draft.vue +++ b/src/components/draft/draft.vue @@ -127,7 +127,6 @@ max-width: 100%; p { - word-wrap: break-word; white-space: normal; overflow-x: hidden; } diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue index 3196e9bc4..57de5b2ee 100644 --- a/src/components/flash/flash.vue +++ b/src/components/flash/flash.vue @@ -72,7 +72,6 @@ flex: 1 1 0; line-height: 1.2; white-space: normal; - word-wrap: normal; } .hidden { diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue index 5ef63a51e..18fc77df4 100644 --- a/src/components/link-preview/link-preview.vue +++ b/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 diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index 1247aa739..5cc8c50a3 100644 --- a/src/components/media_modal/media_modal.vue +++ b/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 { diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 42f572941..c3261e17d 100644 --- a/src/components/mention_link/mention_link.scss +++ b/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; diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss index b7dfbfb87..30f2422ed 100644 --- a/src/components/mentions_line/mentions_line.scss +++ b/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: " "; diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index a0338856f..e8895ce59 100644 --- a/src/components/notification/notification.scss +++ b/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; } diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index e52c25e40..79ef5b300 100644 --- a/src/components/notifications/notifications.scss +++ b/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; diff --git a/src/components/poll/poll.scss b/src/components/poll/poll.scss index d043eefa6..693d9898b 100644 --- a/src/components/poll/poll.scss +++ b/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 { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index b6a7256a7..b215eaee2 100644 --- a/src/components/status/status.scss +++ b/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; diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 56e1d7b9f..314708280 100644 --- a/src/components/status_body/status_body.scss +++ b/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; From 5c5a350447133725c337f0f718d3f7885b525446 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Apr 2025 11:30:15 +0300 Subject: [PATCH 2/8] fix notifications and make long statuses use relative units --- src/components/status/status.scss | 2 -- src/components/status_body/status_body.scss | 5 ++++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/status/status.scss b/src/components/status/status.scss index b215eaee2..e43617ecd 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -284,8 +284,6 @@ & .status-username, & .mute-reason { - - word-break: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 314708280..32a2502fc 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -53,12 +53,15 @@ } .text-wrapper { + text-overflow: ellipsis; + word-break: break-word; + overflow: hidden; display: flex; flex-flow: column nowrap; &.-tall-status { position: relative; - height: 220px; + height: 16em; overflow: hidden; z-index: 1; From 1b626403256926278029a6b86f94d6f53a62a519 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Apr 2025 12:25:23 +0300 Subject: [PATCH 3/8] make post status form wrap stable --- src/components/post_status_form/post_status_form.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss index 9e8de25d5..a79cae4a6 100644 --- a/src/components/post_status_form/post_status_form.scss +++ b/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; From 6184229cdad899f030c74b1aee156e4929f70eb7 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Apr 2025 12:28:16 +0300 Subject: [PATCH 4/8] missed one --- src/components/status_body/status_body.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 32a2502fc..18d38827c 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -54,7 +54,7 @@ .text-wrapper { text-overflow: ellipsis; - word-break: break-word; + overflow-wrap: break-word; overflow: hidden; display: flex; flex-flow: column nowrap; From 7afdf3e70c90af6b5844d4862f2b9cba02f848f9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Apr 2025 12:35:07 +0300 Subject: [PATCH 5/8] fix user handle wrap --- src/components/status/status.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/status/status.scss b/src/components/status/status.scss index e43617ecd..9a2885122 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -92,8 +92,10 @@ a { display: inline-block; - overflow-wrap: break-word; - text-wrap: pretty; + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; + width: 100% } } @@ -101,6 +103,7 @@ min-width: 1.6em; margin-right: 0.4em; white-space: nowrap; + overflow-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; From fd58f3b320358e57b26cebdd4e17c02574e6b4ed Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Apr 2025 12:44:36 +0300 Subject: [PATCH 6/8] "changelog" --- changelog.d/fix-wrap.skip | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 changelog.d/fix-wrap.skip diff --git a/changelog.d/fix-wrap.skip b/changelog.d/fix-wrap.skip new file mode 100644 index 000000000..e69de29bb From 42cd7babdc5df28b1f0957da09774cf2ae63b092 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Apr 2025 19:04:27 +0300 Subject: [PATCH 7/8] fix "show more" on bigger scales --- src/components/status_body/status_body.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 18d38827c..07fc8ef45 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -68,7 +68,7 @@ .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 */ @@ -97,9 +97,9 @@ .tall-status-hider { position: absolute; - height: 70px; - margin-top: 150px; - line-height: 110px; + height: 5em; + margin-top: 10em; + line-height: 8em; z-index: 2; } From 05aacaa3329d50fbd5452a633070c8057b7499d9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 3 Apr 2025 20:45:53 +0300 Subject: [PATCH 8/8] lint --- src/components/status/status.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 9a2885122..93253b1a7 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -103,7 +103,6 @@ min-width: 1.6em; margin-right: 0.4em; white-space: nowrap; - overflow-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0;