More layout fixes to visual tool

Author: MatthewDorner

visual-tool/index.css

@@ -41,6 +41,7 @@
 #wrapper {
  padding-left: 5em;
  padding-right: 5em;
+ ;
 }
 
 #infoContainer {

visual-tool/index.html

@@ -164,12 +164,12 @@ <h2>abcjs-vexflow-renderer visual comparison tool</h2>
  <div id="outputs" class="row">
  <div id="vexflowOutput" class="col">
  <h3>abcjs-vexflow-renderer rendered:</h3>
- <div id="vexflowRendered">
+  <div id="vexflowRendered">
  </div>
  </div>
  <div id="abcjsOutput" class="col">
  <h3>abcjs rendered:</h3>
- <div id="abcjsRendered">
+  <div id="abcjsRendered">
  </div>
  </div>
  </div> 

visual-tool/scripts/index.js

@@ -177,15 +177,11 @@ function renderTune() {
  });
 
  // render abcjs
- ABCJS.renderAbc('abcjsRendered', abc);
+ ABCJS.renderAbc('abcjsRendered', abc, { responsive: 'resize' });
  while ($('#vexflowRendered')[0].firstChild) {
  $('#vexflowRendered')[0].removeChild($('#vexflowRendered')[0].firstChild);
  }
 
- const abcjsSvg = document.querySelector('#abcjsRendered svg');
- abcjsSvg.setAttribute('viewBox', '0 0 762 200');
- abcjsSvg.setAttribute('preserveAspectRatio', 'xMidYMin meet');
-
  // render abcjs-vexflow-renderer
  const renderer = new Vex.Flow.Renderer($('#vexflowRendered')[0], Vex.Flow.Renderer.Backends.SVG);
  renderer.resize(500, 2000);