Merge pull request #1129 from ragibson/fix-wide-elements-breaking-layout

Fix wide elements (equations, tables, and inline code) breaking site width and layout
nunocoracao · Jan 4, 2024 · bfc35c3 · bfc35c3
2 parents d17678b + 7b2f775
commit bfc35c3
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
@@ -4590,6 +4590,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
@@ -111,6 +111,21 @@ body:has(#menu-controller:checked) {
   @apply absolute opacity-5 -z-10;
 }
 
+/* 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 */
 .prose .chroma {