More stylezz

app/assets/stylesheets/framework/common.scss

@@ -463,11 +463,13 @@ img.emoji {
 .prepend-left-5 { margin-left: 5px; }
 .prepend-left-8 { margin-left: 8px; }
 .prepend-left-10 { margin-left: 10px; }
+.prepend-left-15 { margin-left: 15px; }
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
 .append-right-5 { margin-right: 5px; }
 .append-right-8 { margin-right: 8px; }
 .append-right-10 { margin-right: 10px; }
+.append-right-15 { margin-right: 15px; }
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
 .append-bottom-0 { margin-bottom: 0; }

app/assets/stylesheets/pages/labels.scss

@@ -57,46 +57,6 @@
   border-bottom-left-radius: $border-radius-base;
 }
 
-.label-row {
-  display: flex;
-
-  .label-name {
-    width: 200px;
-    flex-shrink: 0;
-
-    .label {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 100%;
-    }
-  }
-
-  .label-type {
-    display: block;
-    margin-bottom: 10px;
-    margin-left: 50px;
-  }
-
-  .label-description {
-    display: block;
-
-    .description-text {
-      margin: 0 0 10px 0;
-    }
-
-    a {
-      color: $blue-600;
-    }
-  }
-
-  .label {
-    padding: 4px $grid-size;
-    font-size: $label-font-size;
-    position: relative;
-    top: ($grid-size / 2);
-  }
-}
-
 .color-label {
   padding: 0 $grid-size;
   line-height: 16px;
@@ -323,4 +283,36 @@
     content: none;
     display: block;
   }
+
+  .label-name {
+    width: 150px;
+    flex-shrink: 0;
+
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+  }
+
+  .label-type {
+    display: block;
+    margin-bottom: 10px;
+    margin-left: 50px;
+  }
+
+  .label-description {
+    flex-grow: 1;
+
+    a {
+      color: $blue-600;
+    }
+  }
+
+  .label {
+    padding: 4px $grid-size;
+    font-size: $label-font-size;
+    position: relative;
+    top: ($grid-size / 2);
+  }
 }

app/views/shared/_label_row.html.haml

@@ -2,12 +2,12 @@
 - show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project)
 - show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project)
 
-.label-row
+.label-name
-  .label-name
+  = link_to_label(label, subject: @project, tooltip: false)
-    = link_to_label(label, subject: @project, tooltip: false)
+.label-description
-  .label-description
+  .append-right-15.prepend-left-15
     - if label.description.present?
-      .description-text
+      .description-text.append-bottom-10
         = markdown_field(label, :description)
     %ul.label-links
       - if show_label_issues_link