text-wrap: pretty attempt again

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 */

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}

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;

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

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;