Long mapping message instead of wide

Author: ivansg44

lib/DataHarmonizer.js

@@ -1346,23 +1346,20 @@ class DataHarmonizer {
     let flatHeaders = this.getFlatHeaders();
     const self = this;
     if (flatHeaders) {
-      $('#field-mapping').prepend(
-        '<col></col>'.repeat(flatHeaders[1].length + 1)
-      );
-      $('#expected-headers-tr').html(
-        '<td><b>Expected second row</b></td> <td>' +
-          flatHeaders[1].join('</td><td>') +
-          '</td>'
-      );
-      $('#actual-headers-tr').html(
-        '<td><b>Imported second row</b></td> <td>' +
-          matrix[1].join('</td><td>') +
-          '</td>'
-      );
-      flatHeaders[1].forEach(function (item, i) {
-        if (item != matrix[1][i]) {
-          $('#field-mapping col').get(i + 1).style.backgroundColor = 'orange';
+      const $fieldMappingBody = $('#field-mapping-body');
+      flatHeaders[1].forEach(function (expectedHeader, i) {
+        const expectedHeaderCell =
+          `<td class="field-mapping-cell">${expectedHeader}</td>`
+        const actualHeaderCell =
+          `<td class="field-mapping-cell">${matrix[1][i]}</td>`;
+        const rowCells = expectedHeaderCell + actualHeaderCell;
+        let row;
+        if (expectedHeader !== matrix[1][i]) {
+          row = $(`<tr class="table-warning">${rowCells}</tr>`);
+        } else {
+          row = $(`<tr>${rowCells}</tr>`);
         }
+        $fieldMappingBody.append(row);
       });
 
       $('#specify-headers-modal').modal('show');

lib/data-harmonizer.css

@@ -5,17 +5,16 @@
 }
 
 #specify-headers-comparison-row {
-  overflow-x: auto;
+  overflow-y: auto;
 }
 
 #specify-headers-err-msg {
   display: none;
 }
 
 #field-mapping-container {
-  overflow-x: scroll;
-  padding-bottom: 1rem;
-  scrollbar-width: 1rem;
+  height: 25vh;
+  width: 100%;
 }
 
 .handsontable.listbox th,
@@ -24,20 +23,9 @@
 }
 
 #field-mapping {
-  white-space: nowrap;
+  width: 100%;
 }
 
-#field-mapping col {
-  border-left: 2px solid black;
-}
-#field-mapping col:first-child {
-  background: #ff0;
-}
-#field-mapping col:nth-child(2n + 3) {
-  background: #ccc;
-}
-
-#field-mapping tr td,
-#field-mapping tr th {
-  padding: 3px;
+.field-mapping-cell {
+  width: 50%;
 }

lib/specifyHeadersModal.html

@@ -9,12 +9,17 @@
               column specification. Mismatched column(s) are shown in orange.
             </div>
           </div>
-          <div class="row my-3 border" id="specify-headers-comparison-row">
-            <div class="col">
-              <div class="row" id="field-mapping-container">
-                <table id="field-mapping">
-                  <tr id="expected-headers-tr"></tr>
-                  <tr id="actual-headers-tr"></tr>
+          <div class="row my-2" id="specify-headers-comparison-row">
+            <div class="col px-0 py-1">
+              <div id="field-mapping-container" class="container-fluid">
+                <table id="field-mapping" class="table-bordered">
+                  <thead>
+                    <tr>
+                      <th class="field-mapping-cell">Expected header</th>
+                      <th class="field-mapping-cell">Actual header</th>
+                    </tr>
+                  </thead>
+                  <tbody id="field-mapping-body"></tbody>
                 </table>
               </div>
             </div>