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 544350a..2d7c328 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 a45a9c8..5890801 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 39e5e19..eb54ac6 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 375a3af..a1c83b9 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 337812b..a12becd 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;