diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue index 2960298dca8560beaa1b2d8ca27ff11d85b325f8..9df03a4d7f8442716ba0ba61b15a3037842da4d7 100644 --- a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue +++ b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/label_item.vue @@ -31,7 +31,7 @@ export default { const { label, highlight, isLabelSet, isLabelIndeterminate } = props; const labelColorBox = h('span', { - class: 'dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-absolute', + class: 'dropdown-label-box gl-mr-2', style: { backgroundColor: label.color, }, diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_labels_view.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_labels_view.vue index e664d6b4bd6fd8744f9cceb6bc116c44a76a81a7..dce80af8a5ead166c25d054768a223d9e8b637bc 100644 --- a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_labels_view.vue +++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/dropdown_contents_labels_view.vue @@ -154,7 +154,6 @@ export default { v-for="(label, index) in visibleLabels" :key="label.id" :is-checked="isLabelSelected(label)" - is-check-centered is-check-item :active="shouldHighlightFirstItem && index === 0" active-class="is-focused" diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/label_item.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/label_item.vue index 19024692bdf2269d7a72b57f23802351a97aab2f..4ce2644262aa8282e41707177aae4a5e5470024a 100644 --- a/app/assets/javascripts/sidebar/components/labels/labels_select_widget/label_item.vue +++ b/app/assets/javascripts/sidebar/components/labels/labels_select_widget/label_item.vue @@ -10,9 +10,9 @@ export default { </script> <template> - <div class="gl-display-flex gl-align-items-center gl-word-break-word gl-relative gl-pl-4"> + <div class="gl-display-flex gl-word-break-word"> <span - class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-absolute" + class="dropdown-label-box gl-flex-shrink-0 gl-top-0 gl-mr-3" :style="{ 'background-color': label.color }" data-testid="label-color-box" ></span> diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 7cb1fc293bdfdc89dd96ccbd4fd6610bfda45d36..884cb70cb9fcc19e03725a51bebbcaca8878b2ce 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -718,11 +718,13 @@ } .dropdown-label-box { - top: 0; - left: 0; - height: 100%; - width: $gl-spacing-scale-2; + margin-right: $gl-spacing-scale-3; + margin-top: $gl-spacing-scale-2; + display: inline-block; + width: $gl-spacing-scale-5; + height: $gl-spacing-scale-3; border-radius: $border-radius-base; + border: 1px solid var(--white, $white); } .git-revision-dropdown {