Add parse errors tab and improve error diagnostics UI

web/static/css/style.css

@@ -473,6 +473,12 @@ table {
     border-collapse: collapse;
 }
 
+.table-scroll {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
 th, td {
     padding: 0.75rem;
     text-align: left;
@@ -488,6 +494,54 @@ tr:hover {
     background: #f8f9fa;
 }
 
+#parse-errors-table {
+    min-width: 980px;
+    table-layout: fixed;
+}
+
+#parse-errors-table th:nth-child(1),
+#parse-errors-table td:nth-child(1) {
+    width: 92px;
+}
+
+#parse-errors-table th:nth-child(2),
+#parse-errors-table td:nth-child(2) {
+    width: 110px;
+}
+
+#parse-errors-table th:nth-child(3),
+#parse-errors-table td:nth-child(3) {
+    width: 95px;
+}
+
+#parse-errors-table th:nth-child(4),
+#parse-errors-table td:nth-child(4) {
+    width: 300px;
+}
+
+#parse-errors-table th:nth-child(5),
+#parse-errors-table td:nth-child(5) {
+    width: auto;
+}
+
+#parse-errors-table td,
+#parse-errors-table th {
+    vertical-align: top;
+}
+
+#parse-errors-table td code {
+    white-space: normal;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    display: inline-block;
+}
+
+#parse-errors-table td:last-child {
+    white-space: normal;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+}
+
 code {
     font-family: 'Monaco', 'Menlo', monospace;
     font-size: 0.85em;