Prevent topic title from clipping some characters due to overflow

Prevent topic title from clipping some characters due to overflow

diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 1198653..b531601 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -261,6 +261,12 @@
     color: $header_primary;
     display: block;
     @include ellipsis;
+    // Some characters like '/' and 'j' can be wider than the font's em-box
+    // this causes some left/right text clipping with overflow hidden
+    // extra padding adds space to account for this; negative margin repositions
+    $wiggle-room: 0.15em;
+    padding-left: $wiggle-room;
+    margin-left: -#{$wiggle-room};
   }
   .topic-statuses {
     .d-icon {
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 87d7416..4550c18 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -27,7 +27,7 @@
   h1 {
     font-size: $font-up-4;
     line-height: $line-height-medium;
-    overflow: hidden;
+    overflow-wrap: break-word;
     width: 100%;
     a {
       color: $primary;

GitHub sha: 89f6ff15

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/15