--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Wed May 15 19:42:21 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Thu May 16 09:24:50 2019 +0200
@@ -2,19 +2,19 @@
   <div class="d-flex flex-column flex-fill">
     <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
     <UISpinnerOverlay v-if="loading" />
-    <div class="mt-3 d-flex flex-row my-auto">
-      <div class="my-auto mx-auto">
-        <ul class="list-group">
-          <li
-            :style="legendStyle(index)"
-            class="text-left list-group-item"
-            v-for="(entry, index) in legend"
-            :key="index"
-          >
-            {{ entry }}
-          </li>
-        </ul>
-        <div class="my-auto mx-auto">
+    <div class="d-flex flex-fill">
+      <DiagramLegend>
+        <div v-for="(entry, index) in legend" :key="index" class="legend">
+          <span
+            :style="
+              `${legendStyle(
+                index
+              )}; border-radius: 0; width: 40px; height: 20px;`
+            "
+          ></span>
+          {{ entry }}
+        </div>
+        <div>
           <select
             @change="applyChange"
             v-model="form.template"
@@ -36,7 +36,7 @@
             <translate>Export to PDF</translate>
           </button>
         </div>
-      </div>
+      </DiagramLegend>
       <div
         ref="diagramContainer"
         :id="containerId"
@@ -79,6 +79,9 @@
 
 export default {
   mixins: [diagram, pdfgen],
+  components: {
+    DiagramLegend: () => import("@/components/DiagramLegend")
+  },
   data() {
     return {
       containerId: "availablefairwaydepth",