Fix bug with long strings in issue boards

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%;
+}

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;

changelogs/unreleased/43367-fix-board-long-strings.yml

+---
+title: Fix issue board bug with long strings in titles
+merge_request: 18924
+author:
+type: fixed