Fix svg scaling and positioning on workflow page

Author: Mark Robinson

src/main/resources/static/css/main.css

@@ -60,21 +60,14 @@ body {
 }
 
 #visualisation {
-    overflow: auto;
+    overflow: hidden;
     padding: 0;
+    height: 500px;
 }
 
-#graph svg {
+#graph {
     width: 100%;
-}
-
-#graph svg polygon {
-    stroke-width: 0;
-}
-
-#loading {
-    width: 150px;
-    margin: 0 auto;
+    height: 100%;
 }
 
 #download-gv {

src/main/resources/templates/workflow.html

@@ -128,12 +128,9 @@ <h2>Workflow: <span th:text="${workflow.label}">Workflow Name</span></h2>
     <div class="row">
         <div class="col-md-12">
             <div id="visualisation" class="jumbotron">
-                <div id="loading">
-                    <object id="graph" th:data="@{'/workflows/' + ${workflow.id} + '/graph/svg'}" type="image/svg+xml">
-                        <img th:src="@{'/workflows/' + ${workflow.id} + '/graph/png'}" alt="workflow graph" />
-                    </object>
-                </div>
-                <div id="graph"></div>
+                <object id="graph" th:data="@{'/workflows/' + ${workflow.id} + '/graph/svg'}" type="image/svg+xml">
+                    <img th:src="@{'/workflows/' + ${workflow.id} + '/graph/png'}" alt="workflow graph" />
+                </object>
             </div>
             <h2>Inputs</h2>
             <table class="table table-striped table-hover">