From fa93875e373a9b8843d6f4c5c3f9a9994681c485 Mon Sep 17 00:00:00 2001
From: Ali Faraji <31096694+alifa98@users.noreply.github.com>
Date: Sun, 16 Nov 2025 20:41:00 -0500
Subject: [PATCH]  Fix MathJax long-formula overflow on X-axis in mobile  and
 small screens view. (#3302)

This PR fixes an issue where long MathJax formulas in blog posts
overflowed horizontally and broke the layout.

* Added a small CSS rule to make MathJax formulas horizontally
scrollable instead of overflowing.
* Now, when a formula is wider than the container, users can scroll
horizontally without the page layout getting messed up.

**SCSS changes:**

```scss
mjx-container[jax="CHTML"][display="true"] {
  overflow-x: auto;
}
```

**Testing:**
Verified that:

* Long formulas no longer push the layout wider than the viewport.
* Short formulas render as before.



Before:

https://github.com/user-attachments/assets/521b4967-cc1e-4e8b-b2fc-2c59314a8dee

After code fix:

https://github.com/user-attachments/assets/698811ff-d418-43eb-9261-5073105a3d9f


Live demo at: [PI Day -- bellards
formula](https://blog.faraji.info/math/Pi-day.html#bellards-formula-for-pi);
open with responsive design mode or with a mobile device.
---
 _sass/_base.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index 13a55d1..614a443 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1489,3 +1489,7 @@ figure.cover {
     color: #23212d !important;
   }
 }
+
+mjx-container[jax="CHTML"][display="true"] {
+  overflow-x: auto;
+}