diff --git a/client/galaxy/scripts/components/ToolRecommendation.vue b/client/galaxy/scripts/components/ToolRecommendation.vue
index 880f3aa93cb..e0500e6eb15 100644
--- a/client/galaxy/scripts/components/ToolRecommendation.vue
+++ b/client/galaxy/scripts/components/ToolRecommendation.vue
@@ -105,20 +105,34 @@ export default {
         },
         renderD3Tree(predictedTools) {
             const duration = 750;
-            const x = 620;
-            const y = 260;
-            const tree = d3.layout.tree().size([y, x]);
-            const diagonal = d3.svg.diagonal().projection(d => {
-                return [d.y, d.x];
-            });
             const svg = d3
                 .select("#tool-recommendation")
                 .append("svg")
                 .attr("class", "tree-size")
-                .append("g")
-                .attr("transform", "translate(" + 250 + "," + 20 + ")");
+                .append("g");
             let i = 0;
             let root = null;
+            let x = 0;
+            let y = 0;
+            let translateX = 0;
+
+            const gElem = svg[0][0];
+            const svgElem = gElem.parentNode;
+            const clientH = svgElem.clientHeight;
+            const clientW = svgElem.clientWidth;
+            y = parseInt(clientH * 0.9);
+            x = parseInt(clientW * 0.6);
+            translateX = parseInt(clientW * 0.15);
+
+            svgElem.setAttribute("viewBox", "0 0 " + x + " " + clientH);
+            svgElem.setAttribute("preserveAspectRatio", "xMinYMin");
+            gElem.setAttribute("transform", "translate(" + translateX + ", 5)");
+
+            const tree = d3.layout.tree().size([y, x]);
+
+            const diagonal = d3.svg.diagonal().projection(d => {
+                return [d.y, d.x];
+            });
             const update = source => {
                 // Compute the new tree layout.
                 const nodes = tree.nodes(root).reverse();
diff --git a/client/galaxy/style/scss/base.scss b/client/galaxy/style/scss/base.scss
index ac567172780..05fdce4b813 100644
--- a/client/galaxy/style/scss/base.scss
+++ b/client/galaxy/style/scss/base.scss
@@ -1658,10 +1658,10 @@ body.reports {
         circle {
             fill: lighten($brand-primary, 20%);
             stroke: lighten($brand-primary, 20%);
-            stroke-width: 0.3rem;
+            stroke-width: 0.1rem;
         }
         text {
-            font: 0.75rem sans-serif;
+            font: 0.4rem sans-serif;
         }
     }
 
@@ -1674,14 +1674,13 @@ body.reports {
     }
 
     .tree-size {
-        width: 96%;
+        width: 100%;
         height: 50%;
-        position: absolute;
     }
 
     .link {
         fill: none;
         stroke: lighten($brand-primary, 20%);
-        stroke-width: 0.3rem;
+        stroke-width: 0.2rem;
     }
 }