refactor: Eliminate Modal Scrollbars, Mitigate Focus-Scroll Clipping, and Fix Canvas Color Rendering (Fixes #341)

[prasad-0007]

Summary

This PR addresses all layout, accessibility, and rendering issues inside interactive project modals by implementing dynamic scaling, mitigating programmatic focus scrolls, and correcting invalid canvas stroke properties. It also resolves homepage navbar layout distortions and horizontal page overflow on small/mobile viewports, completely resolving #341.

Closes

Closes #341

Changes Made

• Dynamic Auto-Scaling (main.js): Added a central ResizeObserver-driven scaling routine (applyModalScaling) to automatically scale down modal contents to fit perfectly within the modal viewport, eliminating duplicate scrollbars.
• Focus-Scroll Mitigation (main.js, word-scramble.js, typing-speed-tester.js): Updated programmatic .focus() calls to use { preventScroll: true } to stop browser shifts when modals load.
• Viewport Clipping Resolution (typing-speed-tester.js, color-palette.js): Removed internal .scrollIntoView() calls that shifted the modal containers vertically and clipped the top/bottom panels.
• Canvas Color Rendering Fix (collatz.js, projects.js): Fixed invisible graph lines/axes by changing the canvas context strokeStyle from the unsupported CSS variable var(--text-secondary) to hex color #64748b.
• Responsive Mobile Navbar & Overflow Fix (index.html, styles.css): Resolved page-level horizontal overflow and layout distortion on mobile viewports by removing the unused, fixed-position off-screen drawer layout on .nav-controls. Implemented a responsive wrap layout so the logo and sound/theme controls display side-by-side on Row 1, and the category filter tabs wrap cleanly to Row 2 to scroll horizontally without vertical stacking. Also fixed a missing closing </div> tag for the nav wrapper.

Screenshots & Proof

1. Dynamic Scaling (Pascal's Triangle)

2. Canvas Color Fix (Collatz Graph)

3. Focus-Scroll Mitigation (Word Scramble / Hangman)

Verification & Testing

• Validated CSS & HTML responsive behaviors by testing viewport sizes down to 746px and smaller (down to 320px).
• Tested the scaling and layout behavior inside modals across multiple screen resolutions and zoom levels.
• Validated JavaScript syntax for all modified files using node --check.

[vercel]

@prasad-0007 is attempting to deploy a commit to the Anuj's projects Team on Vercel.

A member of the Team first needs to authorize it.