Add a minimum screen size for biorepo table

layouts/custom/repository.html

@@ -57,6 +57,30 @@
     .no_checkbox>i.jstree-checkbox {
         display: none
     }
+
+    .table {
+        margin: 0 auto;
+        padding: 0 2em;
+        max-width: 1650px;
+        height: 730px;
+        margin-bottom: 50px;
+    }
+
+    .no-table{
+        display: none;
+    }
+
+    @media only screen and (max-width: 650px) {
+        .table{
+            display: none;
+        }
+        .no-table{
+            margin: 0 auto;
+            padding: 0 2em;
+            margin-bottom: 50px;
+            display: inherit;
+        }
+    }
 </style>
 
 <div class="content">
@@ -127,18 +151,23 @@
         </div>
     </div>
     <hr>
-    <div class="container" align=center style="max-width: none;">
-        <table id="samplesTable" border="1">
-            <tr>
-                <th class="he">H&E Thumbnail (Pr)</th>
-                <th class="he">H&E Thumbnail (Bl)</th>
-                <th class="he">H&E Thumbnail (LUT)</th>
-                <th>Disease</th>
-                <th>ID</th>
-                <th>Age</th>
-                <th>Ethnicity</th>
-            </tr>
-        </table>
+    <div class=table>
+        <div class="container" align=center style="max-width: none;">
+            <table id="samplesTable" border="1">
+                <tr>
+                    <th class="he">H&E Thumbnail (Pr)</th>
+                    <th class="he">H&E Thumbnail (Bl)</th>
+                    <th class="he">H&E Thumbnail (LUT)</th>
+                    <th>Disease</th>
+                    <th>ID</th>
+                    <th>Age</th>
+                    <th>Ethnicity</th>
+                </tr>
+            </table>
+        </div>
+    </div>
+    <div class=no-table>
+        <h2>Screen width too narrow to display biorepository table</h1>
     </div>
 </div>