From 00ac16f3ada6d0a40c627dbe59a110866697dc8d Mon Sep 17 00:00:00 2001
From: Ryan Gibson <ryan.alexander.gibson@gmail.com>
Date: Mon, 18 Dec 2023 17:09:22 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Add=20CSS=20overflow/wrapping=20?=
 =?UTF-8?q?on=20KaTeX,=20tables,=20and=20code=20sections?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This fixes a bug where long post elements could break out of the
width of the overall page and break overall formatting or views,
especially on mobile devices.
---
 assets/css/compiled/main.css | 22 ++++++++++++++++++++++
 assets/css/main.css          | 15 +++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index f977c6e6..8476b769 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1231,6 +1231,28 @@ body:has(#menu-controller:checked) {
   opacity: 0.05;
 }
 
+/* Fix long KaTeX equations on mobile (see https://katex.org/docs/issues.html#css-customization) */
+
+.katex-display {
+  overflow: auto hidden
+}
+
+/* Fix long tables breaking out of article on mobile */
+
+table {
+  display: block;
+  overflow: auto;
+}
+
+/* Fix long inline code sections breaking out of article on mobile */
+
+code {
+  word-wrap: break-word;
+  /* All browsers since IE 5.5+ */
+  overflow-wrap: break-word;
+  /* Renamed property in CSS3 draft spec */
+}
+
 /* -- Chroma Highlight -- */
 
 /* Background */
diff --git a/assets/css/main.css b/assets/css/main.css
index d23b285e..9fc2681e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -96,6 +96,21 @@ body:has(#menu-controller:checked) {
   @apply absolute -z-10 opacity-5;
 }
 
+/* Fix long KaTeX equations on mobile (see https://katex.org/docs/issues.html#css-customization) */
+.katex-display { overflow: auto hidden }
+
+/* Fix long tables breaking out of article on mobile */
+table {
+    display: block;
+    overflow: auto;
+}
+
+/* Fix long inline code sections breaking out of article on mobile */
+code {
+    word-wrap: break-word;         /* All browsers since IE 5.5+ */
+    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
+}
+
 /* -- Chroma Highlight -- */
 /* Background */
 .chroma {