From 6f00daba2fdb58c33a1b7d9ca64e1dbfd06d57d6 Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Mon, 11 Nov 2019 12:28:25 -0700
Subject: [PATCH] Forcibly wrap topic titles including long "words"

---
 tildes/scss/_mixins.scss        | 13 +++++++++++++
 tildes/scss/modules/_topic.scss |  9 ++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/tildes/scss/_mixins.scss b/tildes/scss/_mixins.scss
index 74cbb82..ff21697 100644
--- a/tildes/scss/_mixins.scss
+++ b/tildes/scss/_mixins.scss
@@ -20,3 +20,16 @@
     min-height: 0;
   }
 }
+
+// Forcibly wrap text in the element if it can't be done "naturally", necessary for
+// handling long "words" in places like titles that might otherwise mess up the layout
+@mixin force-text-wrap-if-needed() {
+  overflow-wrap: anywhere;
+
+  @supports not (overflow-wrap: anywhere) {
+    // Only Firefox supports overflow-wrap: anywhere so far, these two rules should be
+    // fairly similar for other browsers
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+}
diff --git a/tildes/scss/modules/_topic.scss b/tildes/scss/modules/_topic.scss
index 9743436..47d199a 100644
--- a/tildes/scss/modules/_topic.scss
+++ b/tildes/scss/modules/_topic.scss
@@ -49,6 +49,8 @@
   }
 
   .topic-title {
+    @include force-text-wrap-if-needed;
+
     display: inline;
     margin: 0;
     margin-right: 0.2rem;
@@ -248,6 +250,10 @@
   .topic-voting {
     float: right;
   }
+
+  header h1 {
+    @include force-text-wrap-if-needed;
+  }
 }
 
 .topic-full-byline {
@@ -269,9 +275,10 @@
 }
 
 .topic-full-link {
+  @include force-text-wrap-if-needed;
+
   display: flex;
   align-items: first baseline;
-  word-break: break-all;
 }
 
 .topic-full-content {