From 99750b8edb9146223fa9a64546dd2c4502b8e972 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 19 Aug 2021 08:28:52 -0400
Subject: [PATCH] improve table viewing on mobile (still not great)

---
 docs/assets/plugins/metadata/metadata.js | 14 ++++++++++++++
 docs/assets/styles/docs.css              | 10 ++++++++++
 2 files changed, 24 insertions(+)

diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index 6e5385bc9..6620b1f5d 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -435,5 +435,19 @@
 
       next(content);
     });
+
+    // Wrap tables so we can scroll them horizontally when needed
+    hook.doneEach(function () {
+      const content = document.querySelector('.content');
+      const tables = [...content.querySelectorAll('table')];
+
+      tables.map(table => {
+        table.outerHTML = `
+          <div class="table-wrapper">
+            ${table.outerHTML}
+          </div>
+        `;
+      });
+    });
   });
 })();
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index cc5f74dd5..817f6ed80 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -456,6 +456,16 @@ strong {
 }
 
 /* Tables */
+.table-wrapper {
+  overflow-x: auto;
+}
+
+@media screen and (max-width: 1200px) {
+  .table-wrapper table {
+    min-width: 800px;
+  }
+}
+
 .markdown-section table {
   display: table;
   margin-bottom: 1.5rem;