Resolve "System level labels UI broken"

1 files changed, 78 insertions, 0 deletions

diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 391dfea0703..2b40404971c 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -72,6 +72,9 @@
 }
 
 .manage-labels-list {
+  padding: 0;
+  margin-bottom: 0;
+
   > li:not(.empty-message):not(.is-not-draggable) {
     background-color: $white-light;
     margin-bottom: 5px;
@@ -81,6 +84,10 @@
     border-radius: $border-radius-default;
     border: 1px solid $theme-gray-100;
 
+    &:last-child {
+      margin-bottom: 0;
+    }
+
     &.sortable-ghost {
       opacity: 0.3;
     }
@@ -243,7 +250,10 @@
 .label-actions-list {
   list-style: none;
   flex-shrink: 0;
+  text-align: right;
   padding: 0;
+  position: relative;
+  top: -3px;
 }
 
 .label-badge {
@@ -272,6 +282,16 @@
   padding: 0;
 }
 
+.label-description {
+  .description-text {
+    margin-bottom: 10px;
+
+    .admin-labels & {
+      margin-bottom: 0;
+    }
+  }
+}
+
 .label-list-item {
   .content-list &::before,
   .content-list &::after {
@@ -319,6 +339,64 @@
         fill: $blue-600;
       }
     }
+
+    &.remove-row {
+      &:hover {
+        color: $gl-text-red;
+
+        svg {
+          fill: $gl-text-red;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, md)-1) {
+  .manage-labels-list {
+    > li:not(.empty-message):not(.is-not-draggable) {
+      flex-wrap: wrap;
+    }
+
+    .label-name {
+      order: 1;
+      flex-grow: 1;
+      width: auto;
+      max-width: 100%;
+    }
+
+    .label-actions-list {
+      order: 2;
+      flex-shrink: 1;
+      text-align: left;
+    }
+
+    .label-links {
+      white-space: normal;
+    }
+
+    .label-description {
+      order: 3;
+      width: 100%;
+
+      > .append-right-default.prepend-left-default {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+@media (max-width: 910px) {
+  .priority-badge {
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    margin-top: $gl-padding;
+
+    .label-badge {
+      display: inline-block;
+    }
   }
 }