--- a/client/src/components/Systemconfiguration.vue	Mon Dec 17 15:45:39 2018 +0100
+++ b/client/src/components/Systemconfiguration.vue	Mon Dec 17 15:54:27 2018 +0100
@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex flex-row">
-    <div :class="spacerStyle"></div>
+    <Spacer></Spacer>
     <div class="card sysconfig mt-3 shadow-xs">
       <h6
         class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
@@ -57,19 +57,6 @@
   width: 100%;
   height: 100%;
 }
-
-.spacer {
-  height: 100vh;
-}
-
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
-
-.spacer-expanded {
-  min-width: $sidebar-width + $offset;
-}
 </style>
 
 <script>
@@ -93,6 +80,8 @@
 import { HTTP } from "../lib/http";
 import { displayError } from "../lib/errors.js";
 import { mapState } from "vuex";
+import Spacer from "./Spacer";
+
 export default {
   name: "systemconfiguration",
   data() {
@@ -105,19 +94,11 @@
   },
   components: {
     "chrome-picker": Chrome,
-    "compact-picker": Compact
+    "compact-picker": Compact,
+    Spacer
   },
   computed: {
-    ...mapState("application", ["showSidebar"]),
-    spacerStyle() {
-      return [
-        "spacer ml-3",
-        {
-          "spacer-expanded": this.showSidebar,
-          "spacer-collapsed": !this.showSidebar
-        }
-      ];
-    }
+    ...mapState("application", ["showSidebar"])
   },
   methods: {
     submit() {