Make learn app notes responsive

Author: akshay-rajan

learn/templates/learn/layout.html

@@ -167,6 +167,18 @@ <h5>Preprocessing</h5>
       document.getElementById('chapter-link-close').classList.toggle('d-none');
       document.getElementById('chapter-link-open').classList.toggle('d-none');
     }
+    // If device width < 768px
+    if (window.innerWidth < 768) {
+      const tables = document.querySelectorAll('table');
+      tables.forEach(table => {
+        table.classList.add('table-responsive');
+      });
+      // Set all img tags to responsive
+      const imgs = document.querySelectorAll('img');
+      imgs.forEach(img => {
+        img.classList.add('img-fluid');
+      });
+    }
   </script>    
   {% block script %}{% endblock %}
 </body>

main/static/learn/css/style.css

@@ -127,6 +127,10 @@ table.confusion-matrix td.incorrect {
   display: none;
 }
 
+mjx-container mjx-math {
+  white-space: normal;
+}
+
 @media screen and (max-width: 768px) {
   .learn-content {
     min-width: 80vw;