refactor: resolve modal responsive scaling, focus clipping, and collatz axes color

Author: prasad-0007

web-app/js/main.js

@@ -648,6 +648,95 @@ if (stickyFilterBar && heroSection) {
 
     renderRecentSearches();
 
+    // ── Central Dynamic Auto-Scaling (ResizeObserver) ─────────────────
+    var modalResizeObserver = null;
+
+    function applyModalScaling() {
+        var modalContent = document.querySelector('.modal-content');
+        var modalBody = document.getElementById('modalBody');
+        if (!modalContent || !modalBody) return;
+
+        // Reset scroll position to top to avoid viewport clippings during calculations
+        modalContent.scrollTop = 0;
+        modalBody.scrollTop = 0;
+
+        // Hide scrollbars on the container
+        modalContent.style.overflow = 'hidden';
+
+        // Reset inline styles to capture natural dimensions
+        modalBody.style.transform = '';
+        modalBody.style.transformOrigin = '';
+        modalBody.style.width = '';
+        modalBody.style.height = '';
+
+        var firstChild = modalBody.firstElementChild;
+        if (!firstChild) return;
+
+        firstChild.style.transform = '';
+        firstChild.style.transformOrigin = '';
+
+        var computedStyle = window.getComputedStyle(modalContent);
+        var paddingTop = parseFloat(computedStyle.paddingTop) || 32;
+        var paddingBottom = parseFloat(computedStyle.paddingBottom) || 32;
+        var paddingLeft = parseFloat(computedStyle.paddingLeft) || 32;
+        var paddingRight = parseFloat(computedStyle.paddingRight) || 32;
+
+        var availableHeight = modalContent.clientHeight - paddingTop - paddingBottom;
+        var availableWidth = modalContent.clientWidth - paddingLeft - paddingRight;
+
+        var contentHeight = firstChild.scrollHeight;
+        var contentWidth = firstChild.scrollWidth;
+
+        if (contentHeight <= 0 || contentWidth <= 0) return;
+
+        var zoom = 1;
+        var heightZoom = availableHeight / contentHeight;
+        var widthZoom = availableWidth / contentWidth;
+
+        zoom = Math.min(heightZoom, widthZoom);
+        if (zoom > 1) {
+            zoom = 1;
+        }
+
+        // Apply scale transform and origins
+        firstChild.style.transform = 'scale(' + zoom + ')';
+        firstChild.style.transformOrigin = 'top center';
+
+        // Constrain wrapper block size to prevent scroll triggering
+        modalBody.style.height = (contentHeight * zoom) + 'px';
+        modalBody.style.width = '100%';
+        modalBody.style.display = 'flex';
+        modalBody.style.flexDirection = 'column';
+        modalBody.style.alignItems = 'center';
+    }
+
+    function initModalScaling() {
+        applyModalScaling();
+
+        if (modalResizeObserver) {
+            modalResizeObserver.disconnect();
+        }
+
+        var modalBody = document.getElementById('modalBody');
+        var firstChild = modalBody ? modalBody.firstElementChild : null;
+        if (firstChild) {
+            modalResizeObserver = new ResizeObserver(function () {
+                requestAnimationFrame(applyModalScaling);
+            });
+            modalResizeObserver.observe(firstChild);
+        }
+
+        window.addEventListener('resize', applyModalScaling);
+    }
+
+    function destroyModalScaling() {
+        if (modalResizeObserver) {
+            modalResizeObserver.disconnect();
+            modalResizeObserver = null;
+        }
+        window.removeEventListener('resize', applyModalScaling);
+    }
+
     // ── Focus Trap for Modal ──────────────────────────────────────────
     function getFocusableElements(root) {
         var selector =
@@ -668,9 +757,9 @@ if (stickyFilterBar && heroSection) {
             var first = focusables[0];
             var last = focusables[focusables.length - 1];
             if (e.shiftKey && document.activeElement === first) {
-                e.preventDefault(); last.focus();
+                e.preventDefault(); last.focus({ preventScroll: true });
             } else if (!e.shiftKey && document.activeElement === last) {
-                e.preventDefault(); first.focus();
+                e.preventDefault(); first.focus({ preventScroll: true });
             }
         };
         document.addEventListener('keydown', handler, true);
@@ -710,25 +799,37 @@ if (stickyFilterBar && heroSection) {
             if (typeof initializeProject === 'function') initializeProject(name);
         });
 
+        // Initialize reactive scale calculations
+        initModalScaling();
+
         removeTrap = trapFocus(modal);
         var focusables = getFocusableElements(modalBody);
         var firstFocusable = focusables[0] || modalClose;
         if (firstFocusable && typeof firstFocusable.focus === 'function') {
-            firstFocusable.focus();
+            firstFocusable.focus({ preventScroll: true });
         }
     }
 
     function closeProjectSafe() {
         if (!modal || !modal.classList.contains('active')) return;
+
+        destroyModalScaling();
+
         modal.classList.remove('active');
         modal.setAttribute('aria-hidden', 'true');
         document.body.style.paddingRight = '';
         document.body.style.overflow = '';
         setMainInert(false);
         if (removeTrap) { removeTrap(); removeTrap = null; }
-        if (modalBody) modalBody.innerHTML = '';
+        if (modalBody) {
+            modalBody.innerHTML = '';
+            modalBody.style.transform = '';
+            modalBody.style.transformOrigin = '';
+            modalBody.style.width = '';
+            modalBody.style.height = '';
+        }
         if (lastFocusedElement && typeof lastFocusedElement.focus === 'function') {
-            lastFocusedElement.focus();
+            lastFocusedElement.focus({ preventScroll: true });
         }
         lastFocusedElement = null;
     }

web-app/js/projects.js

@@ -1,4 +1,4 @@
-// Project Registry
+// Project Registry
 // Each project's HTML and logic lives in its own file under js/projects/
 
 function getProjectHTML(projectName) {
@@ -2091,7 +2091,7 @@ function initCollatz() {
         const yScale = graphHeight / maxValue;
 
         // Draw axes
-        ctx.strokeStyle = 'var(--text-secondary)';
+        ctx.strokeStyle = '#64748b';
         ctx.lineWidth = 2;
         ctx.beginPath();
         ctx.moveTo(padding, padding);

web-app/js/projects/collatz.js

@@ -230,7 +230,7 @@ function initCollatz() {
         const xStep = graphWidth / (sequence.length - 1);
         const yScale = graphHeight / maxValue;
 
-        ctx.strokeStyle = 'var(--text-secondary)';
+        ctx.strokeStyle = '#64748b';
         ctx.lineWidth = 2;
         ctx.beginPath();
         ctx.moveTo(padding, padding);

web-app/js/projects/typing-speed-tester.js

@@ -257,7 +257,7 @@ function getTypingSpeedTesterHTML() {
         inputElement.value = "";
         inputElement.disabled = false;
         inputElement.removeAttribute("aria-disabled");
-        inputElement.focus();
+        inputElement.focus({ preventScroll: true });
 
         result.innerHTML = "";
         startTime = Date.now();
@@ -733,7 +733,7 @@ resultDetails.innerHTML = `
         requestAnimationFrame(() => sentenceElement.classList.remove('sentence-loading'));
         inputElement.value = '';
         inputElement.disabled = false;
-        inputElement.focus();
+        inputElement.focus({ preventScroll: true });
         if (startSession && !sessionStarted) {
             sessionStarted = true;
             startTime = Date.now();

web-app/js/projects/word-scramble.js

@@ -422,7 +422,7 @@ function initWordScramble() {
         renderWord(shuffleWord(current.word));
         updateStats();
         setMessage(keepStreak ? 'Unscramble the letters.' : 'Fresh word loaded.');
-        guessInput.focus();
+        guessInput.focus({ preventScroll: true });
 
         // Launch countdown engine for the active round
         startTimer();
@@ -506,7 +506,7 @@ function checkGuess() {
     shuffleBtn.addEventListener('click', () => {
         if (!current) return;
         renderWord(shuffleWord(current.word));
-        guessInput.focus();
+        guessInput.focus({ preventScroll: true });
     });
 
     nextBtn.addEventListener('click', () => {