--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Thu Jul 11 13:51:26 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Thu Jul 11 14:14:48 2019 +0200
@@ -46,7 +46,7 @@
       <div
         ref="diagramContainer"
         :id="containerId"
-        class="mx-auto my-auto diagram-container"
+        class="diagram-container flex-fill"
       ></div>
     </div>
   </div>
@@ -90,10 +90,9 @@
       containerId: "availablefairwaydepthlnwl",
       resizeListenerFunction: null,
       loading: false,
-      labelPaddingTop: 15,
-      scalePaddingLeft: 50,
-      scalePaddingRight: 30,
-      paddingTop: 10,
+      scalePaddingLeft: 60,
+      scalePaddingRight: 0,
+      paddingTop: 25,
       pdf: {
         doc: null,
         width: null,
@@ -345,7 +344,7 @@
       this.$store.commit("application/paneSetup", "DEFAULT");
     },
     getDimensions({ svgHeight, svgWidth }) {
-      const mainMargin = { top: 20, right: 20, bottom: 110, left: 200 };
+      const mainMargin = { top: 0, right: 20, bottom: 75, left: 200 };
       const navMargin = {
         top: svgHeight - mainMargin.top - 65,
         right: 20,
@@ -380,11 +379,9 @@
       let diagram = d3
         .select(element)
         .append("svg")
-        .attr("width", dimensions.width)
-        .attr("height", dimensions.mainHeight);
-      diagram = diagram
-        .append("g")
-        .attr("transform", `translate(0 ${this.paddingTop})`);
+        .attr("width", "100%")
+        .attr("height", "100%");
+      diagram = diagram.append("g");
       const yScale = d3
         .scaleLinear()
         .domain([0, 100])
@@ -438,7 +435,7 @@
           "transform",
           `translate(${this.scalePaddingLeft +
             widthPerItem * i +
-            widthPerItem / 2} ${dimensions.mainHeight - 15})`
+            widthPerItem / 2} ${dimensions.mainHeight + this.paddingTop - 5})`
         );
     },
     drawAFD(
@@ -499,6 +496,7 @@
             return yScale(data.above + data.between + d);
           }
         })
+        .attr("transform", `translate(0 ${this.paddingTop})`)
         .attr("width", afdWidth)
         .attr("fill", (d, i) => {
           return this.$options.AFDCOLORS[i];
@@ -542,22 +540,26 @@
         .attr("y", d => {
           return yScale(d);
         })
+        .attr("transform", `translate(0 ${this.paddingTop})`)
         .attr("width", ldcWidth)
         .attr("fill", () => {
           return this.$options.LWNLCOLORS.LDC;
         });
     },
     drawScaleLabel({ diagram, dimensions }) {
-      const center = dimensions.mainHeight / 2;
       diagram
         .append("text")
         .text(this.$options.LEGEND)
         .attr("text-anchor", "middle")
         .attr("x", 0)
         .attr("y", 0)
-        .attr("dy", "10")
+        .attr("dy", "20")
         // translate a few mm to the right to allow for slightly higher letters
-        .attr("transform", `translate(2, ${center}), rotate(-90)`);
+        .attr(
+          "transform",
+          `translate(2, ${(dimensions.mainHeight + this.paddingTop) /
+            2}), rotate(-90)`
+        );
     },
     drawScale({ diagram, dimensions, yScale }) {
       const yAxisLeft = d3
@@ -579,7 +581,9 @@
         .append("g")
         .attr(
           "transform",
-          `translate(${dimensions.width - this.scalePaddingRight})`
+          `translate(${dimensions.width - this.scalePaddingRight} ${
+            this.paddingTop
+          })`
         )
         .call(yAxisLeft)
         .selectAll(".tick text")
@@ -600,7 +604,10 @@
         .attr("stroke", "#333");
       diagram
         .append("g")
-        .attr("transform", `translate(${this.scalePaddingLeft})`)
+        .attr(
+          "transform",
+          `translate(${this.scalePaddingLeft} ${this.paddingTop})`
+        )
         .call(yAxisRight)
         .selectAll(".tick text")
         .attr("fill", "black")