🐛 Add CSS overflow/wrapping on KaTeX, tables, and code sections

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.
jpanther · Dec 18, 2023 · 00ac16f · 00ac16f
1 parent 82b5481
commit 00ac16f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git 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
@@ -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 {