--- a/client/src/components/map/contextbox/Contextbox.vue	Thu Nov 22 08:57:38 2018 +0100
+++ b/client/src/components/map/contextbox/Contextbox.vue	Thu Nov 22 10:20:21 2018 +0100
@@ -3,9 +3,11 @@
         <div @click="close" class="ui-element close-contextbox text-muted">
             <i class="fa fa-close"></i>
         </div>
-        <Bottlenecks v-if="showInContextBox === 'bottlenecks'"></Bottlenecks>
-        <Imports v-if="showInContextBox === 'imports'"></Imports>
-        <Staging v-if="showInContextBox === 'staging'"></Staging>
+        <transition name="fade" mode="out-in">
+            <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks>
+            <Imports v-if="contextBoxContent === 'imports'"></Imports>
+            <Staging v-if="contextBoxContent === 'staging'"></Staging>
+        </transition>
     </div>
 </template>
 
@@ -34,22 +36,26 @@
     Staging: () => import("./Staging.vue")
   },
   computed: {
-    ...mapState("application", ["showSearchbarLastState", "showInContextBox"]),
+    ...mapState("application", [
+      "showSearchbarLastState",
+      "contextBoxContent",
+      "showContextBox"
+    ]),
     style() {
       return [
-        "ui-element shadow-xs contextbox ml-3",
+        "ui-element shadow-xs contextbox",
         {
-          contextboxcollapsed: !this.showInContextBox,
-          contextboxextended: this.showInContextBox,
-          "rounded-bottom": this.showInContextBox !== "imports",
-          rounded: this.showInContextBox === "imports"
+          contextboxcollapsed: !this.showContextBox,
+          contextboxextended: this.showContextBox,
+          "rounded-bottom": this.contextBoxContent !== "imports",
+          rounded: this.contextBoxContent === "imports"
         }
       ];
     }
   },
   methods: {
     close() {
-      this.$store.commit("application/showInContextBox", null);
+      this.$store.commit("application/showContextBox", false);
       this.$store.commit(
         "application/showSearchbar",
         this.showSearchbarLastState
@@ -64,17 +70,19 @@
   position: relative
   background-color: #ffffff
   opacity: $slight-transparent
-  transition: left 0.3s ease
+  transition: max-width 0.3s, max-height 0.3s
   overflow: hidden
   background: #fff
+  > div:last-child
+    width: 600px
 
 .contextboxcollapsed
-  width: 0
-  height: 0
-  transition: $transition-fast
+  max-width: 0
+  max-height: 0
 
 .contextboxextended
-  min-width: 600px
+  max-width: 600px
+  max-height: 600px
 
 .close-contextbox
   position: absolute
@@ -83,8 +91,4 @@
   top: 7px
   height: $icon-width
   width: $icon-height
-  display: none
-
-.contextboxextended .close-contextbox
-  display: block
 </style>