style: improve MathJax container and scrollbar appearance #442

- Enhance MathJax container layout and responsiveness
- Center MathJax content and add horizontal scrolling for overflow
- Adjust scrollbar styling for better visibility and consistency
- Improve comments for clarity in basic.styl

source/css/common/basic.styl

@@ -15,7 +15,7 @@ redefine-mobile()
 *
   transition-g()
 
-  // scrollbar
+  // Custom scrollbar
   &::-webkit-scrollbar
     width 6px
     height 6px
@@ -28,6 +28,7 @@ redefine-mobile()
     background-clip content-box
     border 3px solid transparent
 
+  // Hide the background of the scrollbar track
   &::-webkit-scrollbar-track
     background-color var(--scroll-bar-bg-color)
     border 1px solid var(--shadow-color-1)

source/css/common/markdown.styl

@@ -244,10 +244,23 @@
   mjx-container
     display inline-block
     vertical-align baseline
+    width 100%
+    overflow-x auto
+    white-space nowrap
+    scrollbar-width: thin  // For Firefox, if needed
+    text-align center /* Center the content */
+    padding-bottom 8px
+
 
     svg
-      display inline
+      display inline-block /* Allow content to be centered properly */
+
 
   mjx-container[display="true"]
-    display flex !important
+    display block
     justify-content center
+    overflow-x auto
+    text-align center
+
+    svg
+      display inline-block