From 89f6ff1574d15c9d654472f9cd3536d6da833182 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 27 Jul 2020 17:26:48 -0400
Subject: [PATCH] Prevent topic title from clipping some characters due to
 overflow

---
 app/assets/stylesheets/common/base/header.scss | 6 ++++++
 app/assets/stylesheets/desktop/topic.scss      | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 11986538000..b531601e96d 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 87d74169a8b..4550c187003 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;