SHIM: Simplify preview UI. Hard-code container width.

This hard-codes the width of the table's container element to ensure
that the overflow property is respected. Without the hard-coded width,
the table - generated with javascript - overrides the page width,
causing all content to reflow. We do not want that.

This also get's rid of the unnecessary "card" interface.

1 files changed, 8 insertions, 16 deletions

diff --git a/uploader/templates/phenotypes/macro-display-preview-table.html b/uploader/templates/phenotypes/macro-display-preview-table.html
index d31c7fa..6dffe9f 100644
--- a/uploader/templates/phenotypes/macro-display-preview-table.html
+++ b/uploader/templates/phenotypes/macro-display-preview-table.html
@@ -1,19 +1,11 @@
 {%macro display_preview_table(tableid, filetype)%}
-<div class="card">
-  <div class="card-body">
-    <h5 class="card-title">{{filetype | title}}: File Preview</h5>
-    <div class="card-text" style="overflow: scroll;">
-      <table id="{{tableid}}" class="table table-condensed">
-        <thead>
-          <tr>
-          </tr>
-        <tbody>
-          <tr>
-            <td class="data-row-template text-info"></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+<div class="table-responsive"
+     style="max-width:39.2em;border-radius:5px;border: solid 1px;overflow-x: scroll;">
+  <h5>{{filetype | title}}: File Preview</h5>
+  <table id="{{tableid}}" class="table">
+    <thead><tr></tr></thead>
+
+    <tbody></tbody>
+  </table>
 </div>
 {%endmacro%}