Wide tables should scroll horizontally within the page

[simonw]

Wrap the main table in <div style="overflow-x: auto">

[simonw]

I tried this out and it did cause one problem with plugins: datasette-cluster-map still injected itself inside the scrolling area, when instead we would want that map to stay outside of the div with the table in it.

[simonw]

So maybe this is blocked on #987 and adding a new hook in the HTML which plugins like datasette-cluster-map can attach their content to.

[simonw]

This may require updates to the column action menu JavaScript too, since it was not built with scrolling sideways in mind.

[simonw]

Easiest fix for the column action menu positioning - hide them when the user scrolls the containing div:

document.querySelector('.table-wrapper').addEventListener(
  'scroll', () => document.querySelector('.dropdown-menu').style.display = 'none'
);                                            

[simonw]

This isn't blocked on #987 - it just means that datasette-cluster-map will need to learn to look for .table-wrapper first and fall back on the table.

[simonw]

Demo: