Areas/section view for problems

static/less/main.less

@@ -83,7 +83,7 @@
 		&>.name {
 			background: @color1;
 			color: #fff;
-			font-weight: 500;
+			font-weight: @bold;
 			padding: 4px 16px;
 			border-top-left-radius: 4px;
 			border-top-right-radius: 4px;

static/less/problems.less

@@ -30,3 +30,33 @@
 #acknowledged-list.hidden{
 	display: none;
 }
+
+#areas {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	margin-top: 16px;
+
+	.area {
+		.section {
+			display: grid;
+			grid-template-columns: repeat(2, min-content);
+			grid-gap: 8px 12px;
+
+			.name {
+				color: @text2;
+				grid-column: 1 / -1;
+				font-weight: bold !important;
+				line-height: 24px;
+			}
+
+			div {
+				white-space: nowrap;
+			}
+		}
+	}
+}
+
+.hidden {
+	display: none;
+}

static/less/theme.less

@@ -12,7 +12,7 @@
 @color4: #3f9da1;
 @color5: #fe8019;
 
-@bold: 500;
+@bold: 800;
 
 .lighterOrDarker(@color, @amount) {
 	@result: lighten(@color, @amount);