Style: Allow tables to overflow for reponsiveness by wrapping w/JS

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 */

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;

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();
+    }
+})

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>