From 8d2fcabcf4bb474b51ba248e507ccfeea5782da4 Mon Sep 17 00:00:00 2001
From: "C.A.M. Gerlach" <CAM.Gerlach@Gerlach.CAM>
Date: Sun, 20 Mar 2022 19:08:33 -0500
Subject: [PATCH] Style: Allow tables to overflow for reponsiveness by wrapping
 w/JS

---
 pep_sphinx_extensions/pep_theme/static/mq.css |  4 ---
 .../pep_theme/static/style.css                |  5 ++++
 .../pep_theme/static/wrap_tables.js           | 30 +++++++++++++++++++
 .../pep_theme/templates/page.html             |  1 +
 4 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 pep_sphinx_extensions/pep_theme/static/wrap_tables.js

diff --git a/pep_sphinx_extensions/pep_theme/static/mq.css b/pep_sphinx_extensions/pep_theme/static/mq.css
index 1d9336ec4919..45fba70b8c3b 100644
--- a/pep_sphinx_extensions/pep_theme/static/mq.css
+++ b/pep_sphinx_extensions/pep_theme/static/mq.css
@@ -13,10 +13,6 @@
     pre {
         font-size: 0.75rem;
     }
-    table th,
-    table td {
-        font-size: 3vw;
-    }
 }
 
 /* Reduce padding & margins for smaller screens */
diff --git a/pep_sphinx_extensions/pep_theme/static/style.css b/pep_sphinx_extensions/pep_theme/static/style.css
index e295519f1729..88d52ca566fd 100644
--- a/pep_sphinx_extensions/pep_theme/static/style.css
+++ b/pep_sphinx_extensions/pep_theme/static/style.css
@@ -177,6 +177,11 @@ sup {top: -0.5em}
 sub {bottom: -0.25em}
 
 /* Table rules */
+div.table-wrapper {
+    overflow-x: scroll;
+    scrollbar-width: thin;  /* CSS Standards, not *yet* widely supported */
+    scrollbar-color: var(--colour-scrollbar) transparent;
+}
 table {
     width: 100%;
     border-collapse: collapse;
diff --git a/pep_sphinx_extensions/pep_theme/static/wrap_tables.js b/pep_sphinx_extensions/pep_theme/static/wrap_tables.js
new file mode 100644
index 000000000000..70c0a3a4bc03
--- /dev/null
+++ b/pep_sphinx_extensions/pep_theme/static/wrap_tables.js
@@ -0,0 +1,30 @@
+// Wrap the tables in PEP bodies in a div, to allow for responsive scrolling
+
+"use strict";
+
+const pepContentId = "pep-content";
+
+
+// Wrap passed table element in wrapper divs
+function wrapTable (table) {
+    const wrapper = document.createElement("div");
+    wrapper.classList.add("table-wrapper");
+    table.parentNode.insertBefore(wrapper, table);
+    wrapper.appendChild(table);
+}
+
+
+// Wrap all tables in the PEP content in wrapper divs
+function wrapPepContentTables () {
+    const pepContent = document.getElementById(pepContentId);
+    const bodyTables = pepContent.getElementsByTagName("table");
+    Array.from(bodyTables).forEach(wrapTable);
+}
+
+
+// Wrap the tables as soon as the DOM is loaded
+document.addEventListener("DOMContentLoaded", () => {
+    if (document.getElementById(pepContentId)) {
+        wrapPepContentTables();
+    }
+})
diff --git a/pep_sphinx_extensions/pep_theme/templates/page.html b/pep_sphinx_extensions/pep_theme/templates/page.html
index 88ab2dedfeb6..89e688ad0f48 100644
--- a/pep_sphinx_extensions/pep_theme/templates/page.html
+++ b/pep_sphinx_extensions/pep_theme/templates/page.html
@@ -41,5 +41,6 @@ <h2>Contents</h2>
         </nav>
     </section>
     <script src="{{ pathto('_static/colour_scheme.js', resource=True) }}"></script>
+    <script src="{{ pathto('_static/wrap_tables.js', resource=True) }}"></script>
 </body>
 </html>