--- a/client/src/components/admin/Importqueue.vue	Tue Dec 11 13:33:52 2018 +0100
+++ b/client/src/components/admin/Importqueue.vue	Tue Dec 11 16:13:37 2018 +0100
@@ -48,7 +48,7 @@
                 </button>
               </div>
             </div>
-            <div class="text-left d-flex flex-row border-bottom">
+            <div class="text-left d-flex flex-row w-50 border-bottom">
               <div class="header py-1 jobid mr-2">
                 <translate>Id</translate>
               </div>

--- a/client/src/components/admin/Importqueuedetail.vue	Tue Dec 11 13:33:52 2018 +0100
+++ b/client/src/components/admin/Importqueuedetail.vue	Tue Dec 11 16:13:37 2018 +0100
@@ -1,37 +1,60 @@
 <template>
-  <div class="d-flex flex-column py-1">
-    <div class="d-flex flex-row">
-      <div @click="showDetails(job.id)" class="jobid mr-2">{{ job.id }}</div>
-      <div @click="showDetails(job.id)" class="enqueued mr-2">
+  <div class="entry d-flex flex-column py-1 border-bottom w-50">
+    <div class="d-flex flex-row position-relative">
+      <div @click="showDetails(job.id)" class="jobid ml-2 mt-2 mr-2">
+        {{ job.id }}
+      </div>
+      <div @click="showDetails(job.id)" class="enqueued mt-2  mr-2">
         {{ formatDate(job.enqueued) }}
       </div>
-      <div @click="showDetails(job.id)" class="kind mr-2">{{ job.kind }}</div>
-      <div @click="showDetails(job.id)" class="user mr-2">{{ job.user }}</div>
-      <div @click="showDetails(job.id)" class="signer mr-2">
+      <div @click="showDetails(job.id)" class="kind mt-2 mr-2">
+        {{ job.kind }}
+      </div>
+      <div @click="showDetails(job.id)" class="user mt-2 mr-2">
+        {{ job.user }}
+      </div>
+      <div @click="showDetails(job.id)" class="signer mt-2 mr-2">
         {{ job.signer }}
       </div>
-      <div @click="showDetails(job.id)" class="state mr-2">{{ job.state }}</div>
+      <div @click="showDetails(job.id)" class="state mt-2 mr-2">
+        {{ job.state }}
+      </div>
+      <div
+        @click="showDetails(job.id)"
+        class="btn btn-sm h-100 rounded-0 btn-info detailsbutton"
+      >
+        <font-awesome-icon
+          v-if="show"
+          icon="angle-up"
+          fixed-width
+        ></font-awesome-icon>
+        <font-awesome-icon
+          v-else
+          icon="angle-down"
+          fixed-width
+        ></font-awesome-icon>
+      </div>
     </div>
-    <div class="d-flex flex-row">
+    <div class="detailstable d-flex flex-row">
       <div :class="collapse">
         <table class="table table-responsive">
           <thead>
             <tr>
-              <th class="first">
-                <small><translate>Kind</translate></small>
+              <th class="first pb-0">
+                <small class="condensed"><translate>Kind</translate></small>
               </th>
-              <th class="second">
+              <th class="second  pb-0">
                 <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
-                  ><small><translate>Date</translate></small>
-                  <small
+                  ><small class="condensed"><translate>Date</translate></small>
+                  <small class="condensed"
                     ><font-awesome-icon
                       :icon="sortIcon"
                       class="ml-1"
                     ></font-awesome-icon></small
                 ></a>
               </th>
-              <th class="third">
-                <small><translate>Message</translate></small>
+              <th class="third pb-0">
+                <small class="condensed"><translate>Message</translate></small>
               </th>
             </tr>
           </thead>
@@ -42,13 +65,13 @@
               class="detailsrow"
             >
               <td class="first">
-                <small>{{ entry.kind }}</small>
+                <span class="condensed">{{ entry.kind }}</span>
               </td>
               <td class="second">
-                <small>{{ formatDate(entry.time) }}</small>
+                <span class="condensed">{{ formatDate(entry.time) }}</span>
               </td>
               <td class="third">
-                <small>{{ entry.message }}</small>
+                <span class="condensed">{{ entry.message }}</span>
               </td>
             </tr>
           </tbody>
@@ -102,21 +125,25 @@
         this.show = false;
         return;
       }
-      HTTP.get("/imports/" + id, {
-        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-      })
-        .then(response => {
-          const { entries } = response.data;
-          this.entries = entries;
-          this.show = true;
+      if (this.entries.length === 0) {
+        HTTP.get("/imports/" + id, {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
-        .catch(error => {
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
+          .then(response => {
+            const { entries } = response.data;
+            this.entries = entries;
+            this.show = true;
+          })
+          .catch(error => {
+            const { status, data } = error.response;
+            displayError({
+              title: this.$gettext("Backend Error"),
+              message: `${status}: ${data.message || data}`
+            });
           });
-        });
+      } else {
+        this.show = true;
+      }
     }
   },
   computed: {
@@ -138,13 +165,18 @@
     sortIcon() {
       return this.sortAsc ? "sort-amount-down" : "sort-amount-up";
     },
+    icon() {
+      return {
+        "angle-up": !this.show,
+        "angle-down": this.show
+      };
+    },
     collapse() {
       return {
-        animated: true,
-        fadeIn: this.show,
         details: true,
         collapse: true,
-        show: this.show
+        show: this.show,
+        "w-100": true
       };
     }
   }
@@ -152,6 +184,31 @@
 </script>
 
 <style lang="scss" scoped>
+.condensed {
+  font-stretch: condensed;
+}
+
+.entry {
+  background-color: white;
+  cursor: pointer;
+}
+
+.entry:hover {
+  background-color: #f0f0f0;
+  transition: 1s;
+}
+
+.detailstable {
+  margin-left: $offset;
+  margin-right: $large-offset;
+}
+
+.detailsbutton {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+}
 .jobid {
   width: 80px;
 }
@@ -177,7 +234,6 @@
 }
 
 .details {
-  background-color: #fafafa;
   width: 50%;
 }
 
@@ -200,9 +256,20 @@
 }
 
 .third {
-  width: 355px;
+  width: 600px;
   padding-left: 0px;
   border-top: 0px;
   padding-bottom: $small-offset;
 }
+
+thead,
+tbody {
+  display: block;
+}
+
+tbody {
+  height: 150px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
 </style>