--- a/client/src/components/Main.vue	Fri Apr 12 12:11:40 2019 +0200
+++ b/client/src/components/Main.vue	Fri Apr 12 12:29:00 2019 +0200
@@ -6,19 +6,6 @@
       { 'flex-column': ['left', 'right'].includes(paneMode) }
     ]"
   >
-    <div
-      v-if="panes.length !== 1"
-      id="pane-controls"
-      class="position-absolute wh-100 d-flex justify-content-center align-items-center"
-    >
-      <div
-        class="box-control bg-white ui-element small shadow-sm"
-        @click="togglePaneMode"
-      >
-        <font-awesome-icon icon="redo" fixed-width />
-      </div>
-    </div>
-
     <template v-if="panes.length === 1">
       <div id="pane1" class="pane d-flex wh-100">
         <component :is="panes[0]" />
@@ -115,9 +102,6 @@
   bottom: -1.5px
   left: -1.5px
   z-index: 1
-  #pane-controls
-    z-index: 1
-    pointer-events: none
   .pane
     border: solid 1.5px #fff
     background-color: #eee
@@ -149,57 +133,8 @@
     // all components that are supposed to be displayed in a pane must be registered here
     Map: () => import("./map/Map")
   },
-  data() {
-    return {
-      // This is needed to accomplish a true rotation of components/panes with
-      // two panes. On every second "rotation" the components are fliped. This way
-      // toggling between horizontal and vertical mode feels like the components
-      // are actually rotating. See: togglePaneMode()
-      rotations: 0
-    };
-  },
   computed: {
     ...mapState("application", ["panes", "paneMode"])
-  },
-  watch: {
-    panes(panes) {
-      if (panes.length !== 2) this.rotations = 0;
-    }
-  },
-  methods: {
-    rotateComponents() {
-      this.panes.unshift(this.panes.pop());
-    },
-    togglePaneMode() {
-      if (this.panes.length === 2) {
-        this.$store.commit(
-          "application/paneMode",
-          this.paneMode === "horizontal" ? "vertical" : "horizontal"
-        );
-        if (++this.rotations % 2) {
-          this.rotateComponents();
-        }
-      }
-      if (this.panes.length === 3) {
-        let next;
-        if (this.paneMode === "top") {
-          next = "right";
-        }
-        if (this.paneMode === "right") {
-          next = "bottom";
-        }
-        if (this.paneMode === "bottom") {
-          next = "left";
-        }
-        if (this.paneMode === "left") {
-          next = "top";
-        }
-        this.$store.commit("application/paneMode", next);
-      }
-      if (this.panes.length === 4) {
-        this.rotateComponents();
-      }
-    }
   }
 };
 </script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/toolbar/PaneControl.vue	Fri Apr 12 12:29:00 2019 +0200
@@ -0,0 +1,84 @@
+<template>
+  <div
+    @click="togglePaneMode"
+    :class="['toolbar-button', { disabled: panes.length < 2 }]"
+    v-tooltip.right="label"
+  >
+    <font-awesome-icon icon="redo" />
+  </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      // This is needed to accomplish a true rotation of components/panes with
+      // two panes. On every second "rotation" the components are fliped. This way
+      // toggling between horizontal and vertical mode feels like the components
+      // are actually rotating. See: togglePaneMode()
+      rotations: 0
+    };
+  },
+  computed: {
+    ...mapState("application", ["panes", "paneMode"]),
+    label() {
+      return this.$gettext("Rotate Panes");
+    }
+  },
+  watch: {
+    panes(panes) {
+      if (panes.length !== 2) this.rotations = 0;
+    }
+  },
+  methods: {
+    rotateComponents() {
+      this.panes.unshift(this.panes.pop());
+    },
+    togglePaneMode() {
+      if (this.panes.length === 2) {
+        this.$store.commit(
+          "application/paneMode",
+          this.paneMode === "horizontal" ? "vertical" : "horizontal"
+        );
+        if (++this.rotations % 2) {
+          this.rotateComponents();
+        }
+      }
+      if (this.panes.length === 3) {
+        let next;
+        if (this.paneMode === "top") {
+          next = "right";
+        }
+        if (this.paneMode === "right") {
+          next = "bottom";
+        }
+        if (this.paneMode === "bottom") {
+          next = "left";
+        }
+        if (this.paneMode === "left") {
+          next = "top";
+        }
+        this.$store.commit("application/paneMode", next);
+      }
+      if (this.panes.length === 4) {
+        this.rotateComponents();
+      }
+    }
+  }
+};
+</script>

--- a/client/src/components/toolbar/Toolbar.vue	Fri Apr 12 12:11:40 2019 +0200
+++ b/client/src/components/toolbar/Toolbar.vue	Fri Apr 12 12:29:00 2019 +0200
@@ -13,6 +13,7 @@
       <Linetool />
       <Polygontool />
       <Pdftool />
+      <PaneControl />
     </div>
     <div
       @click="$store.commit('application/expandToolbar', !expandToolbar)"
@@ -59,6 +60,10 @@
   pointer-events: auto;
   position: relative;
   overflow: hidden;
+  &.disabled {
+    color: #ccc;
+    cursor: default;
+  }
 }
 
 .toolbar-button:last-child {
@@ -116,6 +121,7 @@
 export default {
   name: "toolbar",
   components: {
+    PaneControl: () => import("./PaneControl"),
     Identify: () => import("./Identify"),
     Layers: () => import("./Layers"),
     Linetool: () => import("./Linetool"),
@@ -126,7 +132,7 @@
   },
   computed: {
     ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]),
-    ...mapState("application", ["expandToolbar"])
+    ...mapState("application", ["expandToolbar", "panes"])
   },
   mounted() {
     window.addEventListener("keydown", e => {