diff options
author | Paul Slaughter <pslaughter@gitlab.com> | 2018-05-16 00:00:51 +0300 |
---|---|---|
committer | Annabel Gray <annabel.m.gray@gmail.com> | 2018-05-16 00:00:51 +0300 |
commit | 3fb8d1011dc5ffdb5ad3c64248c4649a0ab39dd0 (patch) | |
tree | 4e71f849be402d63eea18d0834a14858523decff /app/assets/stylesheets | |
parent | 728441a4080332d567a881d9ad833c211d6ab643 (diff) |
Fix bug with long strings in issue boards
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/framework/mixins.scss | 12 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 8 |
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; |