Add button to grow query area in Spinner.

spinner/lib/src/main/assets/css/main.css

@@ -31,7 +31,7 @@ th {
   border: 1px solid black;
   border-radius: 4px;
   height: 200px;
-  margin-bottom: 8px;
+  margin-bottom: 2px;
 }
 
 li.active {
@@ -98,3 +98,9 @@ table.device-info, table.device-info tr, table.device-info td {
 .null {
   color: #666
 }
+
+#grow-button {
+  width: calc(100% - 18px);
+  height: 0.75rem;
+  margin-bottom: 8px;
+}

spinner/lib/src/main/assets/query.hbs

@@ -7,6 +7,8 @@
     <!-- Query Input -->
     <form action="query" method="post" id="query-form">
       <div class="query-input">{{query}}</div>
+      <button id="grow-button" onclick="onGrowClicked(event)">&nbsp;</button>
+
       <input type="hidden" name="query" id="query" />
       <input type="hidden" name="db" value="{{database}}" />
       <input type="submit" name="action" value="run" />
@@ -97,12 +99,19 @@
         editor.setValue(formatted, formatted.length);
       }
 
-
       function triggerSubmit() {
         onQuerySubmitted();
         document.getElementById('query-form').submit();
       }
 
+      function onGrowClicked(e) {
+        let element = document.querySelector('.query-input');
+        let currentHeight = parseInt(element.style.height) || 200;
+        element.style.height = currentHeight + 100;
+
+        e.preventDefault();
+      }
+
       function onQuerySubmitted() {
         const query = editor.getValue();