--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Thu Apr 04 18:46:17 2019 +0200
+++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Fri Apr 05 10:29:01 2019 +0200
@@ -7,74 +7,53 @@
     }"
   >
     <div v-for="(result, index) in details.summary" :key="index">
-      <div class="pl-2 d-flex">
-        <div @click="toggleDiff(index)" class="my-auto text-left">
-          <UISpinnerButton
-            :state="showDiff === index"
-            :icons="['angle-right', 'angle-down']"
-            classes="text-info"
-          />
+      <div class="px-2 d-flex justify-content-between">
+        <div class="d-flex">
+          <div @click="toggleDiff(index)" class="my-auto text-left">
+            <UISpinnerButton
+              :state="showDiff === index"
+              :icons="['angle-right', 'angle-down']"
+              classes="text-info"
+            />
+          </div>
+          <div>
+            {{ result["fk-gauge-id"] }}
+            <sup v-if="isNew(result)" class="text-success">
+              (<translate>New</translate>)
+            </sup>
+          </div>
         </div>
-        <span v-if="result.versions.length == 1" class="agmcode text-left"
-          ><div>
-            {{ result["fk-gauge-id"] }} <translate>( New )</translate>
-          </div></span
-        >
-        <span v-if="result.versions.length == 2" class="agmcode text-left"
-          ><div>{{ result["fk-gauge-id"] }}</div></span
+        <div>{{ result["measure-date"] | dateTime }}</div>
+      </div>
+      <div v-if="showDiff === index" class="compare-table">
+        <div class="row no-gutters px-4 text-left font-weight-bold">
+          <div :class="isNew(result) ? 'col-6' : 'col-4'">
+            <translate>Value</translate>
+          </div>
+          <div v-if="isOld(result)" class="col-4">
+            <translate>Old</translate>
+          </div>
+          <div :class="isNew(result) ? 'col-6' : 'col-4'">
+            <translate>New</translate>
+          </div>
+        </div>
+        <div
+          class="row no-gutters px-4 text-left"
+          v-for="(entry, index) in Object.keys(result.versions[0])"
+          :key="index"
+          v-if="isNew(result) || isDifferent(result, entry)"
         >
-        <span class="text-left"
-          ><div>{{ result["measure-date"] | dateTime }}</div></span
-        >
-      </div>
-      <div v-if="showDiff === index" class="pl-3 d-flex flex-row">
-        <div class="w-100">
-          <div class="d-flex flex-row pl-3 text-left w-95">
-            <div class="header border-bottom agmdetailskeys">
-              <small><translate>Value</translate></small>
-            </div>
-            <div
-              v-if="result.versions.length == 2"
-              class="header border-bottom agmdetailsvalues"
-            >
-              <small><translate>Old</translate></small>
-            </div>
-            <div class="header border-bottom agmdetailsvalues">
-              <small><translate>New</translate></small>
-            </div>
+          <div :class="isNew(result) ? 'col-6' : 'col-4'">
+            {{ entry }}
+          </div>
+          <div :class="isNew(result) ? 'col-6' : 'col-4'">
+            {{ result.versions[0][entry] }}
           </div>
           <div
-            class="line d-flex flex-row pl-3 text-left w-95"
-            v-for="(entry, index) in Object.keys(result.versions[0])"
-            :key="index"
+            v-if="isOld(result) && isDifferent(result, entry)"
+            :class="isNew(result) ? 'col-6' : 'col-4'"
           >
-            <div
-              v-if="
-                result.versions.length == 1 ||
-                  result.versions[0][entry] != result.versions[1][entry]
-              "
-              class="agmdetailskeys"
-            >
-              <small>{{ entry }}</small>
-            </div>
-            <div
-              v-if="
-                result.versions.length == 1 ||
-                  result.versions[0][entry] != result.versions[1][entry]
-              "
-              class="agmdetailsvalues"
-            >
-              <small>{{ result.versions[0][entry] }}</small>
-            </div>
-            <div
-              v-if="
-                result.versions.length == 2 &&
-                  result.versions[0][entry] != result.versions[1][entry]
-              "
-              class="agmdetailsvalues"
-            >
-              <small>{{ result.versions[1][entry] }}</small>
-            </div>
+            {{ result.versions[1][entry] }}
           </div>
         </div>
       </div>
@@ -90,18 +69,21 @@
     border-top: dashed 1px #dee2e6
     &:first-child
       border-top: none
-
-.line:nth-child(odd)
-  background: #f8f8f8
-
-.agmcode
-  width: 35%
-
-.agmdetailskeys
-  width: 33%
-
-.agmdetailsvalues
-  width: 33%
+    .compare-table
+      position: relative
+      overflow: hidden
+      &::after
+        content: ''
+        position: absolute
+        top: 0
+        right: -5px
+        bottom: 0
+        left: -5px
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4)
+      > div
+        font-size: 0.7rem
+        &:nth-child(odd)
+          background-color: #f8f9fa
 
 .split
   max-height: 35vh
@@ -127,8 +109,6 @@
 import { mapState } from "vuex";
 
 export default {
-  name: "agmdetails",
-  props: ["entry"],
   data() {
     return {
       showDiff: 0 // open first item by default
@@ -144,6 +124,18 @@
       } else {
         this.showDiff = false;
       }
+    },
+    isNew(result) {
+      return result && result.versions && result.versions.length === 1;
+    },
+    isOld(result) {
+      return !this.isNew(result);
+    },
+    isDifferent(result, entry) {
+      return (
+        this.isOld(result) &&
+        result.versions[0][entry] != result.versions[1][entry]
+      );
     }
   }
 };