From 3151fde1e7c9327db28637c149a068c129be0ef5 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 18 Feb 2021 04:36:37 -0500
Subject: [PATCH] UX: allow horizontal overflow scroll, fix button (#95)

---
 .../templates/explorer-query-result.hbs       | 70 ++++++++++---------
 assets/stylesheets/explorer.scss              | 12 ++++
 2 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/assets/javascripts/discourse/templates/explorer-query-result.hbs b/assets/javascripts/discourse/templates/explorer-query-result.hbs
index 68370aa..c773cc5 100644
--- a/assets/javascripts/discourse/templates/explorer-query-result.hbs
+++ b/assets/javascripts/discourse/templates/explorer-query-result.hbs
@@ -1,37 +1,43 @@
-<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>
+<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 class="result-about">
-  {{resultCount}}
-  {{duration}}
-</div>
+    <div class="result-about">
+      {{resultCount}}
+      {{duration}}
+    </div>
 
-<br>
+    <br>
 
-{{~#if hasExplain}}
-  <pre class="result-explain"><code>
-    {{~content.explain}}
-  </code></pre>
-{{~/if}}
+    {{~#if hasExplain}}
+      <pre class="result-explain"><code>
+        {{~content.explain}}
+      </code></pre>
+    {{~/if}}
 
-<br>
+    <br>
+  </header>
 
-<table>
-  <thead>
-  <tr class="headers">
-    {{#each columnDispNames as |col|}}
-      <th>{{col}}</th>
-    {{/each}}
-  </tr>
-  </thead>
-  <tbody>
-  {{#each rows as |row|}}
-    {{query-row-content
-      row=row
-      fallbackTemplate=fallbackTemplate
-      columnTemplates=columnTemplates}}
-  {{/each}}
-  </tbody>
-</table>
+  <section>
+    <table>
+      <thead>
+      <tr class="headers">
+        {{#each columnDispNames as |col|}}
+          <th>{{col}}</th>
+        {{/each}}
+      </tr>
+      </thead>
+      <tbody>
+      {{#each rows as |row|}}
+        {{query-row-content
+          row=row
+          fallbackTemplate=fallbackTemplate
+          columnTemplates=columnTemplates}}
+      {{/each}}
+      </tbody>
+    </table>
+  </section>
+</article>
\ No newline at end of file
diff --git a/assets/stylesheets/explorer.scss b/assets/stylesheets/explorer.scss
index da3fe53..22192e1 100644
--- a/assets/stylesheets/explorer.scss
+++ b/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;