Equation wraps on smaller screens

1 files changed, 17 insertions, 7 deletions

diff --git a/templates/blog/partials/base.html b/templates/blog/partials/base.html
index e1d0677c..b08d116b 100644
--- a/templates/blog/partials/base.html
+++ b/templates/blog/partials/base.html
@@ -57,13 +57,9 @@
       href="{% static 'images/favicons/site.webmanifest' %}"
     />
     <style>
-      .transition-fade {
-        transition: 0.4s;
-        opacity: 1;
-      }
-
-      html.is-animating .transition-fade {
-        opacity: 0;
+      .equation-container {
+        overflow-x: scroll;
+        white-space: nowrap; /* Prevent line breaks */
       }
     </style>
   </head>
@@ -185,5 +181,19 @@
         };
       });
     });
+
+    document.addEventListener("DOMContentLoaded", function() {
+      var equationElements = document.getElementsByTagName("*");
+  
+      for (var i = 0; i < equationElements.length; i++) {
+        var element = equationElements[i];
+  
+        if (element.innerHTML.startsWith("$$") && element.innerHTML.endsWith("$$")) {
+          element.style.overflowX = "scroll";
+          element.style.whiteSpace = "nowrap";
+          element.classList.add("equation-container");
+        }
+      }
+    });
   </script>
 </html>