diff options
5 files changed, 13 insertions, 34 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue index 2b32a6e4a98..0d5afe04e8e 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_item.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue @@ -57,6 +57,9 @@ export default { }, }, computed: { + boundary() { + return this.dropdownLength === 1 ? 'viewport' : 'scrollParent'; + }, status() { return this.job && this.job.status ? this.job.status : {}; }, @@ -104,7 +107,7 @@ export default { <div class="ci-job-component"> <gl-link v-if="status.has_details" - v-gl-tooltip + v-gl-tooltip="{ boundary, placement: 'bottom' }" :href="status.details_path" :title="tooltipText" :class="cssClassJobName" @@ -115,7 +118,7 @@ export default { <div v-else - v-gl-tooltip + v-gl-tooltip="{ boundary, placement: 'bottom' }" :title="tooltipText" :class="cssClassJobName" class="js-job-component-tooltip non-details-job-component" diff --git a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue index 1bfab2a7fc0..02451839330 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue @@ -27,7 +27,8 @@ export default { <template> <span class="ci-job-name-component"> <ci-icon :status="status" /> - - <span class="ci-status-text"> {{ name }} </span> + <span class="ci-status-text text-truncate mw-70p gl-pl-1 d-inline-block align-bottom"> + {{ name }} + </span> </span> </template> diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index d72597a6147..db6c107210e 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -428,6 +428,7 @@ img.emoji { .mw-460 { max-width: 460px; } .mw-6em { max-width: 6em; } +.mw-70p { max-width: 70%; } .min-height-0 { min-height: 0; } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index bb08440fda8..3e6aa43175e 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -712,15 +712,9 @@ top: 8px; } +.ci-build-text, .ci-status-text { - max-width: 110px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: bottom; - display: inline-block; - position: relative; - font-weight: $gl-font-weight-normal; + font-weight: 200; } @mixin mini-pipeline-graph-color( @@ -912,26 +906,6 @@ button.mini-pipeline-graph-dropdown-toggle { flex: 1; } - // build name - .ci-build-text, - .ci-status-text { - font-weight: 200; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 70%; - margin-left: 2px; - display: inline-block; - - &::after { - content: ''; - display: block; - } - - @include media-breakpoint-down(xs) { - max-width: 60%; - } - } .ci-status-icon { @extend .append-right-8; diff --git a/app/views/ci/status/_dropdown_graph_badge.html.haml b/app/views/ci/status/_dropdown_graph_badge.html.haml index c787d7420b7..3b6fc85e70e 100644 --- a/app/views/ci/status/_dropdown_graph_badge.html.haml +++ b/app/views/ci/status/_dropdown_graph_badge.html.haml @@ -8,12 +8,12 @@ - if status.has_details? = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, container: 'body' } do %span{ class: klass }= sprite_icon(status.icon) - %span.ci-build-text= subject.name + %span.ci-build-text.text-truncate.mw-70p.gl-pl-1= subject.name - else .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } } %span{ class: klass }= sprite_icon(status.icon) - %span.ci-build-text= subject.name + %span.ci-build-text.text-truncate.mw-70p.gl-pl-1= subject.name - if status.has_action? = link_to status.action_path, class: "ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do |