UX: allow horizontal overflow scroll, fix button (#95)

assets/javascripts/discourse/templates/explorer-query-result.hbs

@@ -1,24 +1,28 @@
-<div class="result-info">
+<article>
+  <header class="result-header">
+    <div class="result-info">
       {{d-button action=(action "downloadResultJson") icon="download" label="explorer.download_json" group=group}}
       {{d-button action=(action "downloadResultCsv") icon="download" label="explorer.download_csv" group=group}}
-</div>
+    </div>
 
-<div class="result-about">
+    <div class="result-about">
       {{resultCount}}
       {{duration}}
-</div>
+    </div>
 
-<br>
+    <br>
 
-{{~#if hasExplain}}
+    {{~#if hasExplain}}
       <pre class="result-explain"><code>
         {{~content.explain}}
       </code></pre>
-{{~/if}}
+    {{~/if}}
 
-<br>
+    <br>
+  </header>
 
-<table>
+  <section>
+    <table>
       <thead>
       <tr class="headers">
         {{#each columnDispNames as |col|}}
@@ -34,4 +38,6 @@
           columnTemplates=columnTemplates}}
       {{/each}}
       </tbody>
-</table>
+    </table>
+  </section>
+</article>

assets/stylesheets/explorer.scss

@@ -280,7 +280,19 @@ table.group-reports {
   margin: 10px 0;
 }
 
+.query-create {
+  display: flex;
+  input {
+    margin-right: 0.5em;
+    margin-bottom: 0;
+  }
+}
+
 .query-results {
+  section {
+    width: 100%;
+    overflow-x: auto;
+  }
   table {
     width: 100%;
     margin-top: 10px;