From 56ed46f83f1306e8c56245b4ba8a7c3e94b9d804 Mon Sep 17 00:00:00 2001
From: Francis Lavoie <lavofr@gmail.com>
Date: Mon, 21 Oct 2024 19:42:20 -0400
Subject: [PATCH] Make overflowing tables scroll horizontally on mobile

---
 src/old/resources/css/docs.css | 6 +++++-
 src/old/resources/js/docs.js   | 3 +++
 src/resources/css/docs.css     | 6 +++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/old/resources/css/docs.css b/src/old/resources/css/docs.css
index 0b25e3a..b33b319 100644
--- a/src/old/resources/css/docs.css
+++ b/src/old/resources/css/docs.css
@@ -718,7 +718,11 @@ table {
 	font-size: 16px;
 }
 
-article > table {
+article > .table-wrapper {
+	overflow-x: scroll;
+}
+
+article table {
 	margin: 25px auto;
 }
 
diff --git a/src/old/resources/js/docs.js b/src/old/resources/js/docs.js
index 01c4ba5..0e6a7d1 100644
--- a/src/old/resources/js/docs.js
+++ b/src/old/resources/js/docs.js
@@ -55,6 +55,9 @@ $(function() {
 			let text = item.innerText.replace(/</g,'&lt;').replace(/>/g,'&gt;');
 			$(item).html('<a href="/docs/caddyfile/matchers#syntax" style="color: inherit;" title="Matcher token">' + text + '</a>');
 		});
+
+	// Wrap all tables in a div so we can apply overflow-x: scroll
+	$('table').wrap('<div class="table-wrapper"></div>');
 });
 
 // addLinkaddLinksToSubdirectivessToAnchors finds all the ID anchors
diff --git a/src/resources/css/docs.css b/src/resources/css/docs.css
index 0da8c54..cf5c1b8 100644
--- a/src/resources/css/docs.css
+++ b/src/resources/css/docs.css
@@ -587,7 +587,11 @@ table {
 	font-size: 16px;
 }
 
-article > table {
+article > .table-wrapper {
+	overflow-x: scroll;
+}
+
+article table {
 	margin: 25px auto;
 }