From fd7caca0393055cf436fd168ae400d8680c76b8e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 13:00:07 +0800
Subject: [PATCH] text-wrap: pretty attempt again
---
src/components/account-info.css | 1 +
src/components/media-alt-modal.jsx | 1 +
src/components/status.css | 3 +++
src/components/translation-block.css | 1 +
src/pages/notifications.css | 4 +++-
5 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/src/components/account-info.css b/src/components/account-info.css
index 544350a0..2d7c328e 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -254,6 +254,7 @@
.account-container .note {
font-size: 95%;
line-height: 1.4;
+ text-wrap: pretty;
}
.account-container .note:not(:has(p)):not(:empty) {
/* Some notes don't have <p> tags, so we need to add some padding */
diff --git a/src/components/media-alt-modal.jsx b/src/components/media-alt-modal.jsx
index a45a9c83..58908013 100644
--- a/src/components/media-alt-modal.jsx
+++ b/src/components/media-alt-modal.jsx
@@ -57,6 +57,7 @@ export default function MediaAltModal({ alt, lang, onClose }) {
<p
style={{
whiteSpace: 'pre-wrap',
+ textWrap: 'pretty',
}}
>
{alt}
diff --git a/src/components/status.css b/src/components/status.css
index 39e5e195..eb54ac6c 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -603,6 +603,7 @@
margin-block: min(0.75em, 12px);
white-space: pre-wrap;
tab-size: 2;
+ text-wrap: pretty;
}
.status .content p:first-child {
margin-block-start: 0;
@@ -726,6 +727,7 @@
white-space: pre-line;
flex-basis: 15em;
flex-grow: 1;
+ text-wrap: pretty;
}
}
@@ -1203,6 +1205,7 @@ a:focus-visible .card img {
box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
+ text-wrap: balance;
}
.card .meta {
font-size: smaller;
diff --git a/src/components/translation-block.css b/src/components/translation-block.css
index 375a3afe..a1c83b9c 100644
--- a/src/components/translation-block.css
+++ b/src/components/translation-block.css
@@ -83,6 +83,7 @@
.status-translation-block .translated-block output {
display: block;
margin-top: 0.75em;
+ text-wrap: pretty;
}
.status-translation-block
.translated-block
diff --git a/src/pages/notifications.css b/src/pages/notifications.css
index 337812bc..a12becd3 100644
--- a/src/pages/notifications.css
+++ b/src/pages/notifications.css
@@ -162,9 +162,10 @@
flex-grow: 1;
min-width: 0;
}
-.notification-content p:first-child {
+.notification-content > p:first-child {
margin-top: 0;
margin-bottom: 8px;
+ text-wrap: pretty;
}
.notification-group-statuses {
@@ -407,6 +408,7 @@
margin-block: min(0.75em, 12px);
white-space: pre-wrap;
tab-size: 2;
+ text-wrap: pretty;
}
.announcements .announcement-reactions:not(:hidden) {
display: flex;