fix(modal): Remove redundant modal fix scripts that interfered with focus restoration

- Removed an inline MODAL FIX script in index.html that was prematurely clearing the modal body on Escape, destroying the focused element and breaking the focus restoration flow in js/main.js.
- Removed a duplicate, broken openProject event listener from the bottom of js/main.js that was causing ReferenceErrors.
- Updated Playwright test locator to specifically target a button inside #projectsSection so that it isn't confused by dynamically injected 'Recently Viewed' cards.

Author: Kunwartejpal Sidhu

web-app/index.html

@@ -1429,142 +1429,7 @@ <h3>${proj.title}</h3>
       })();
     </script>
 
-    <!-- MODAL FIX - Load projects properly -->
-    <script>
-      (function () {
-        const modal = document.getElementById("projectModal");
-        const modalBody = document.getElementById("modalBody");
-        const modalClose = document.getElementById("modalClose");
-        let previouslyFocusedElement = null;
-
-        if (!modal || !modalBody) {
-          console.error("Modal elements not found!");
-          return;
-        }
-
-        // Function to close modal
-        function closeModal() {
-          modal.classList.remove("active");
-          modal.setAttribute("aria-hidden", "true");
-          document.body.style.overflow = "";
-          document.body.style.paddingRight = "";
-
-          // Clear modal body
-          modalBody.innerHTML = "";
-
-          if (previouslyFocusedElement && typeof previouslyFocusedElement.focus === "function") {
-            previouslyFocusedElement.focus();
-            previouslyFocusedElement = null;
-          }
-
-          console.log("Modal closed");
-        }
-
-        // Function to open modal with project
-        window.openProjectModal = function (projectName, triggerElement) {
-          console.log("Opening project:", projectName);
-          previouslyFocusedElement = triggerElement || document.activeElement;
-
-          // Clear previous content
-          modalBody.innerHTML =
-            '<div style="text-align: center; padding: 2rem;">Loading project...</div>';
-
-          // Show modal
-          modal.classList.add("active");
-          modal.setAttribute("aria-hidden", "false");
-          document.body.style.overflow = "hidden";
-
-          // Get project HTML
-          let projectHTML = "";
-
-          // Try to get HTML from the project's function
-          const functionName =
-            "get" +
-            projectName
-              .split("-")
-              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-              .join("") +
-            "HTML";
-
-          if (typeof window[functionName] === "function") {
-            try {
-              projectHTML = window[functionName]();
-              console.log("Loaded via", functionName);
-            } catch (e) {
-              console.error("Error loading project:", e);
-              projectHTML = `<div style="text-align: center; padding: 2rem; color: red;">
-                    <h3>Error loading project</h3>
-                    <p>${e.message}</p>
-                </div>`;
-            }
-          } else {
-            // Fallback: Try to find by looking at loaded scripts
-            console.warn("No loader found for:", projectName);
-            projectHTML = `<div style="text-align: center; padding: 2rem;">
-                <h3>${projectName.replace(/-/g, " ").toUpperCase()}</h3>
-                <p>Project content will be available soon.</p>
-                <p style="color: var(--accent);">Check back later!</p>
-            </div>`;
-          }
-
-          modalBody.innerHTML = `
-            <div class="modal-project-container">
-                <div class="modal-project-header">
-                    <h2>${projectName.replace(/-/g, " ").toUpperCase()}</h2>
-                </div>
-                <div class="modal-project-content">
-                    ${projectHTML}
-                </div>
-            </div>
-        `;
 
-          // Try to initialize project if function exists
-          const initName =
-            "init" +
-            projectName
-              .split("-")
-              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-              .join("");
-
-          if (typeof window[initName] === "function") {
-            setTimeout(() => {
-              try {
-                window[initName]();
-                console.log("Initialized:", projectName);
-              } catch (e) {
-                console.error("Init error:", e);
-              }
-            }, 100);
-          }
-        };
-
-        // Close button handler
-        if (modalClose) {
-          modalClose.addEventListener("click", closeModal);
-        }
-
-        // Click outside to close
-        modal.addEventListener("click", (e) => {
-          if (e.target === modal) {
-            closeModal();
-          }
-        });
-
-        // Escape key to close
-        document.addEventListener("keydown", (e) => {
-          if (e.key === "Escape" && modal.classList.contains("active")) {
-            closeModal();
-          }
-        });
-
-        // Override the existing openProjectSafe if needed
-        if (typeof window.openProjectSafe !== "function") {
-          window.openProjectSafe = window.openProjectModal;
-        }
-
-        console.log('✅ Modal fix loaded');
-      })();
-    </script>
 
     <script>
       // FIX 1: Add missing toPascalCase function

web-app/js/main.js

@@ -1649,35 +1649,7 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     }
 
-// Open Project Modal
-projectCards.forEach(card => {
-    card.tabIndex = 0;
-    card.setAttribute('role', 'button');
-    card.setAttribute('aria-label', `Open ${card.querySelector('h3')?.textContent || 'project'}`);
 
-    const playButton = card.querySelector('.btn-play');
-    
-    if (playButton) {
-        playButton.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const projectName = card.getAttribute('data-project');
-            openProject(projectName);
-        });
-    }
-
-    card.addEventListener('click', () => {
-        const projectName = card.getAttribute('data-project');
-        openProject(projectName);
-    });
-
-    card.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            const projectName = card.getAttribute('data-project');
-            openProject(projectName);
-        }
-    });
-});
     /* ── Activate item based on viewport center crossing timeline dots ── */
     var activeIdx = -1;
     var dots = document.querySelectorAll(".timeline-dot");

web-app/tests-e2e/modal.spec.js

@@ -12,7 +12,8 @@ test.describe('Modal Lifecycle & Focus Trapping', () => {
     await expect(page.locator('body')).toHaveClass(/sidebar-active/);
 
     // Get the first project card's "Try It" button
-    const firstCardPlayBtn = page.locator('.project-card .btn-play').first();
+    // Target #projectsSection specifically so that dynamic 'Recently Viewed' additions don't shift the locator
+    const firstCardPlayBtn = page.locator('#projectsSection .project-card .btn-play').first();
     await expect(firstCardPlayBtn).toBeVisible();
 
     // Focus and click the play button