--- a/client/src/components/importoverview/ImportOverview.vue	Wed Mar 06 10:48:18 2019 +0100
+++ b/client/src/components/importoverview/ImportOverview.vue	Wed Mar 06 12:54:47 2019 +0100
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="overview">
     <UIBoxHeader
       icon="clipboard-check"
       title="Staging Area"
@@ -144,4 +144,9 @@
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.overview {
+  max-height: 850px;
+  overflow-y: auto;
+}
+</style>

--- a/client/src/components/importoverview/staging/Staging.vue	Wed Mar 06 10:48:18 2019 +0100
+++ b/client/src/components/importoverview/staging/Staging.vue	Wed Mar 06 12:54:47 2019 +0100
@@ -7,7 +7,6 @@
       </button>
     </div>
     <StagingDetail
-      class="mb-3 border-bottom"
       :key="data.id"
       v-for="data in filteredData"
       :data="data"

--- a/client/src/components/importoverview/staging/StagingDetail.vue	Wed Mar 06 10:48:18 2019 +0100
+++ b/client/src/components/importoverview/staging/StagingDetail.vue	Wed Mar 06 12:54:47 2019 +0100
@@ -55,13 +55,16 @@
               'ml-3': true,
               'mr-3': true,
               btn: true,
-              'btn-sm': true,
               'btn-outline-success': needsApproval(data) || isRejected(data),
-              'btn-success': isApproved(data)
+              'btn-success': isApproved(data),
+              actions: true
             }"
             @click="toggleApproval(data.id, $options.STATES.APPROVED)"
           >
-            <font-awesome-icon icon="check"></font-awesome-icon>
+            <font-awesome-icon
+              class="small pointer mb-2"
+              icon="check"
+            ></font-awesome-icon>
           </button>
         </div>
         <div>
@@ -69,13 +72,16 @@
             :class="{
               'mr-3': true,
               btn: true,
-              'btn-sm': true,
               'btn-outline-danger': needsApproval(data) || isApproved(data),
-              'btn-danger': isRejected(data)
+              'btn-danger': isRejected(data),
+              actions: true
             }"
             @click="toggleApproval(data.id, $options.STATES.REJECTED)"
           >
-            <font-awesome-icon icon="times" class="pointer"></font-awesome-icon>
+            <font-awesome-icon
+              icon="times"
+              class="small pointer mb-2"
+            ></font-awesome-icon>
           </button>
         </div>
         <div
@@ -169,8 +175,8 @@
                 :key="index"
                 class="mr-1 small text-muted"
               >
-                <td class="condensed text-left">{{ info }}</td>
-                <td class="condensed pl-3 text-left">
+                <td class="text-left">{{ info }}</td>
+                <td class="pl-3 text-left">
                   {{ bottleneck.properties[info] }}
                 </td>
               </tr>
@@ -179,32 +185,28 @@
         </div>
       </div>
     </div>
-    <div v-if="showAGMDetails">
+    <div class="agmdetails" v-if="showAGMDetails">
       <div class="pl-3 d-flex flex-row">
-        <span class="condensed agmcode text-left"
+        <span class="agmcode text-left"
           ><small><translate>ISRS Code</translate></small></span
         >
-        <span class="condensed agmdetail text-left"
+        <span class="agmdetail text-left"
           ><small><translate>Date of measurement</translate></small></span
         >
       </div>
       <div class="diffs">
         <div v-for="(result, index) in data.summary" :key="index">
           <div class="pl-3 d-flex flex-row">
-            <span
-              v-if="result.versions.length == 1"
-              class="condensed agmcode text-left"
+            <span v-if="result.versions.length == 1" class="agmcode text-left"
               ><small
                 >{{ result["fk-gauge-id"] }}
                 <translate>( New )</translate></small
               ></span
             >
-            <span
-              v-if="result.versions.length == 2"
-              class="condensed agmcode text-left"
+            <span v-if="result.versions.length == 2" class="agmcode text-left"
               ><small>{{ result["fk-gauge-id"] }}</small></span
             >
-            <span class="condensed agmdetail text-left"
+            <span class="agmdetail text-left"
               ><small>{{ formatDateTime(result["measure-date"]) }}</small></span
             >
             <div
@@ -227,7 +229,7 @@
           </div>
           <div v-if="showDiff == index" class="pl-3 d-flex flex-row">
             <div>
-              <div class="d-flex flex-row condensed pl-3 text-left">
+              <div class="d-flex flex-row pl-3 text-left">
                 <div class="header border-bottom agmdetailskeys">
                   <small><translate>Value</translate></small>
                 </div>
@@ -242,7 +244,7 @@
                 </div>
               </div>
               <div
-                class="d-flex flex-row condensed pl-3 text-left"
+                class="d-flex flex-row pl-3 text-left"
                 v-for="(entry, index) in Object.keys(result.versions[0])"
                 :key="index"
               >
@@ -335,6 +337,7 @@
     },
     detail() {
       return [
+        "staging",
         "pb-2",
         "pt-2",
         "d-flex",
@@ -515,4 +518,24 @@
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.actions {
+  padding: 1px;
+  width: 1rem;
+  height: 1rem;
+}
+
+.bottlenecksdetails {
+  max-height: 300px;
+  overflow-y: auto;
+  font-stretch: condensed;
+  line-height: 0.9rem;
+}
+
+.agmdetails {
+  max-height: 300px;
+  overflow-y: auto;
+  font-stretch: condensed;
+  line-height: 0.9rem;
+}
+</style>