Merge pull request #3 from KaivalyaMDabhadkar/main

fixed styling issues

Author: Kaivalya1997

styles.css

@@ -1211,34 +1211,43 @@ img:hover {
   /* Math display - prevent overflow and ensure readability */
   .math.display {
     overflow-x: auto;
-    font-size: 1.15em;
-    scrollbar-width: none; /* Hide scrollbar for Firefox */
-    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
+    font-size: 1.05em;
+    scrollbar-width: thin; /* Thin scrollbar for Firefox */
   }
 
   .math.display::-webkit-scrollbar {
-    display: none; /* Hide scrollbar for Chrome/Safari */
+    height: 3px; /* Very thin horizontal scrollbar */
+    display: block;
+  }
+  
+  .math.display::-webkit-scrollbar-thumb {
+    background: var(--primary-light);
+    border-radius: 3px;
+    opacity: 0.5;
   }
 
   /* MathJax on mobile */
   mjx-container[display="true"] {
     padding: 1rem !important;
-    font-size: 1.1em !important;
+    font-size: 1.05em !important;
   }
 
   /* Only display math should scroll horizontally on mobile */
   mjx-container[display="true"] mjx-math {
     overflow-x: auto !important;
     overflow-y: hidden !important;
     max-width: 100% !important;
-    -ms-overflow-style: none !important; /* IE/Edge */
-    scrollbar-width: none !important; /* Firefox */
+    scrollbar-width: thin !important;
   }
 
   mjx-container[display="true"] mjx-math::-webkit-scrollbar {
-    width: 0 !important;
-    height: 0 !important;
-    display: none !important;
+    height: 3px !important;
+    display: block !important;
+  }
+
+  mjx-container[display="true"] mjx-math::-webkit-scrollbar-thumb {
+    background: var(--primary-light) !important;
+    border-radius: 3px !important;
   }
 
   /* Inline math must never create a scrollable box */