Fix bug with long strings in issue boards

2 files changed, 17 insertions, 3 deletions

diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 9ff24ebc127..0ea0b65b95f 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -210,3 +210,15 @@
     margin-left: -$size;
   }
 }
+
+/*
+ * Mixin that fixes wrapping issues with long strings (e.g. URLs)
+ *
+ * Note: the width needs to be set for it to work in Firefox
+ */
+@mixin overflow-break-word {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
+}
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 681242f8d85..011d38532b4 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -284,6 +284,9 @@
   box-shadow: 0 1px 2px $issue-boards-card-shadow;
   list-style: none;
 
+  // as a fallback, hide overflow content so that dragging and dropping still works
+  overflow: hidden;
+
   &:not(:last-child) {
     margin-bottom: 5px;
   }
@@ -310,14 +313,13 @@
 }
 
 .card-title {
+  @include overflow-break-word();
   margin: 0 30px 0 0;
   font-size: 1em;
   line-height: inherit;
 
   a {
     color: $gl-text-color;
-    word-wrap: break-word;
-    word-break: break-word;
     margin-right: 2px;
   }
 }
@@ -462,8 +464,8 @@
   }
 
   .issuable-header-text {
+    @include overflow-break-word();
     padding-right: 35px;
-    word-break: break-word;
 
     > strong {
       font-weight: $gl-font-weight-bold;