Proper initialization of the page layout on first load

templates/index.html

@@ -401,22 +401,33 @@
         }
     </style>
     <!-- MathJax Configuration -->
-        <script type="text/x-mathjax-config">
+    <script type="text/x-mathjax-config">
         MathJax.Hub.Config({
             tex2jax: {
-        inlineMath: [['$','$'], ['\\(','\\)']],
-        displayMath: [['$$','$$'], ['\\[','\\]']],
-        processEscapes: true,
-        processEnvironments: true
-        },
-        displayAlign: 'center',
-        "HTML-CSS": {
-            styles: {'.MathJax_Display': {"margin": 0}},
-            linebreaks: { automatic: true }
-        }
+                inlineMath: [['$','$'], ['\\(','\\)']],
+                processEscapes: true
+            }
         });
     </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML"></script>
+    <script>
+        // Initialize layout on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            // Force layout recalculation
+            document.body.style.display = 'none';
+            document.body.offsetHeight; // Force reflow
+            document.body.style.display = '';
 
+            // Show initial section
+            showSection('selection');
+
+            // Update parameters for default algorithm
+            updateDefaultParams();
+
+            // Load markdown content
+            loadMarkdownContent();
+        });
+    </script>
     <!-- MathJax Loading -->
     <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
 </head>
@@ -695,20 +706,27 @@
                 section.style.display = 'none';
             });
 
-            // Remove active class from all nav links
-            document.querySelectorAll('.nav-link').forEach(link => {
-                link.classList.remove('active');
-            });
-
             // Show selected section
-            const section = document.getElementById(sectionId);
-            if (section) {
-                section.style.display = 'block';
-                // Add active class to corresponding nav link
-                const navLink = document.querySelector(`.nav-link[data-section="${sectionId}"]`);
-                if (navLink) {
-                    navLink.classList.add('active');
-                }
+            const selectedSection = document.getElementById(sectionId);
+            if (selectedSection) {
+                selectedSection.style.display = 'block';
+
+                // Force layout recalculation
+                selectedSection.style.opacity = '0';
+                selectedSection.offsetHeight; // Force reflow
+                selectedSection.style.opacity = '1';
+
+                // Update active nav link
+                document.querySelectorAll('.nav-link').forEach(link => {
+                    link.classList.remove('active');
+                    if (link.getAttribute('href') === '#' + sectionId) {
+                        link.classList.add('active');
+                    }
+                });
+
+                // Ensure proper scrolling
+                window.scrollTo(0, 0);
+                document.body.style.overflow = 'auto';
             }
         }