Add background color to the issue pane list

css/80_app.css

@@ -2906,17 +2906,29 @@ div.full-screen > button:hover {
     padding-bottom: 10px;
 }
 
-/* Issues List */
-.issues-list label {
+/* Issues */
+
+.issue {
+    overflow: hidden;
+}
+.issue button {
     padding: 5px;
-}
-.issues-list label > span {
-    display: inline;
-    white-space: normal;
-}
-.issues-list li {
     height: auto;
-    color: inherit;
+    width: 100%;
+    font-weight: inherit;
+    border-radius: 0;
+}
+.issue button.label {
+    text-align: inherit;
+    display: flex;
+}
+.issue.severity-warning,
+.issue.severity-warning li {
+    border-color: #FFDF5C;
+}
+.issue.severity-error,
+.issue.severity-error li {
+    border-color: #f5b0ab;
 }
 
 .issue.severity-warning button {
@@ -2941,6 +2953,20 @@ div.full-screen > button:hover {
     color: #DD1400
 }
 
+/* Issues Pane List */
+
+.issues-list label {
+    padding: 5px;
+}
+.issues-list label > span {
+    display: inline;
+    white-space: normal;
+}
+.issues-list li {
+    height: auto;
+    color: inherit;
+}
+
 /* Entity Issues List */
 
 .entity-issues {
@@ -2950,26 +2976,6 @@ div.full-screen > button:hover {
     border-radius: 4px;
     border-width: 1px;
     border-style: solid;
-    overflow: hidden;
-}
-.entity-issues .issue button {
-    padding: 5px;
-    height: auto;
-    width: 100%;
-    font-weight: inherit;
-    border-radius: 0;
-}
-.entity-issues .issue button.label {
-    text-align: inherit;
-    display: flex;
-}
-.entity-issues .issue.severity-warning,
-.entity-issues .issue.severity-warning li {
-    border-color: #FFDF5C;
-}
-.entity-issues .issue.severity-error,
-.entity-issues .issue.severity-error li {
-    border-color: #f5b0ab;
 }
 .entity-issues .issue:first-of-type {
     margin-top: 5px;

modules/ui/issues.js

@@ -140,7 +140,8 @@ export function uiIssues(context) {
             });
 
         var label = enter
-            .append('label');
+            .append('button')
+            .attr('class', 'label');
 
         label.each(function(d) {
             var iconSuffix = d.severity === 'warning' ? 'alert' : 'error';

modules/validations/validation_issue.js

@@ -30,7 +30,7 @@ export function validationIssue(attrs) {
         var entityKeys = _map(this.entities, function(entity) {
             return osmEntity.key(entity);
         });
-        return this.type + entityKeys.join();
+        return this.message + this.type + entityKeys.join();
     };
 
     if (!_isObject(attrs)) throw new Error('Input attrs is not an object');