Wide tables now scroll horizontally, refs #998

datasette/static/app.css

@@ -41,6 +41,9 @@ table a:link {
 table a:visited {
     color: #8f54c4;
 }
+.table-wrapper {
+    overflow-x: auto;
+}
 .small-screen-only,
 .select-wrapper.small-screen-only {
     display: none;

datasette/static/table.js

@@ -50,9 +50,17 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
         params.set(`${column}__notblank`, '1');
         return paramsToUrl(params);
     }
-    function isFacetedBy(column) {
+    function closeMenu() {
-        return getParams().getAll('_facet').includes(column);
+        menu.style.display = 'none';
+        menu.classList.remove('anim-scale-in');
     }
+    // When page loads, add scroll listener on .table-wrapper
+    document.addEventListener('DOMContentLoaded', () => {
+        var tableWrapper = document.querySelector('.table-wrapper');
+        if (tableWrapper) {
+            tableWrapper.addEventListener('scroll', closeMenu);
+        }
+    });
     document.body.addEventListener('click', (ev) => {
         /* was this click outside the menu? */
         var target = ev.target;
@@ -60,8 +68,7 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
             target = target.parentNode;
         }
         if (!target) {
-            menu.style.display = 'none';
+            closeMenu();
-            menu.classList.remove('anim-scale-in');
         }
     });
     function iconClicked(ev) {

datasette/templates/_table.html

@@ -1,4 +1,5 @@
 {% if display_rows %}
+<div class="table-wrapper">
     <table class="rows-and-columns">
         <thead>
             <tr>
@@ -27,6 +28,7 @@
         {% endfor %}
         </tbody>
     </table>
+</div>
 {% else %}
     <p class="zero-results">0 records</p>
 {% endif %}