diff options
| author | Annabel Gray <annabel.m.gray@gmail.com> | 2018-05-15 21:00:51 +0000 |
|---|---|---|
| committer | Annabel Gray <annabel.m.gray@gmail.com> | 2018-05-15 21:00:51 +0000 |
| commit | 64fe244d40ca44fb0433af78a474cfe4cfec33d7 (patch) | |
| tree | 4e71f849be402d63eea18d0834a14858523decff | |
| parent | 728441a4080332d567a881d9ad833c211d6ab643 (diff) | |
| parent | 3fb8d1011dc5ffdb5ad3c64248c4649a0ab39dd0 (diff) | |
| download | gitlab-ce-64fe244d40ca44fb0433af78a474cfe4cfec33d7.tar.gz | |
Merge branch '43367/fix-board-long-strings' into 'master'
Fix bug with long strings in issue boards
Closes #43367
See merge request gitlab-org/gitlab-ce!18924
| -rw-r--r-- | app/assets/stylesheets/framework/mixins.scss | 12 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 8 | ||||
| -rw-r--r-- | changelogs/unreleased/43367-fix-board-long-strings.yml | 5 |
3 files changed, 22 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; diff --git a/changelogs/unreleased/43367-fix-board-long-strings.yml b/changelogs/unreleased/43367-fix-board-long-strings.yml new file mode 100644 index 00000000000..6228741601e --- /dev/null +++ b/changelogs/unreleased/43367-fix-board-long-strings.yml @@ -0,0 +1,5 @@ +--- +title: Fix issue board bug with long strings in titles +merge_request: 18924 +author: +type: fixed |