fix: center tutorial modal and add backdrop

[badassscoder]

Issue

Fixes #4890

Problem

The introductory "Meet Mr. Mouse!" tutorial modal was left-aligned and visually blended with the workspace. This made it feel like part of the main canvas instead of a focused onboarding dialog, reducing its effectiveness for new users.

Approach & Solution

Alignment Fix

• The modal previously relied on JavaScript (sendToCenter) which set inline top/left styles and could result in misaligned positioning on different screen sizes.
• Added CSS-based centering in dist/css/windows.css using:
  • position: fixed
  • top: 50%
  • left: 50%
  • transform: translate(-50%, -50%)
• In js/widgets/help.js, after the help window is created, inline left, top, and transform styles on the widget frame are cleared so the CSS rules can take precedence.
• Result: The "Meet Mr. Mouse!" modal now appears consistently centered.

Visual Hierarchy (Backdrop)

• Added a .help-modal-backdrop class in dist/css/windows.css that renders a full-screen, semi-transparent black overlay (rgba(0, 0, 0, 0.5)).
• In the HelpWidget constructor:
  • Create and append the backdrop element when the help/tutorial window opens.
  • Add a help-modal class to the widget frame so it appears above the backdrop.
  • On close, remove the backdrop from the DOM and remove the help-modal class.
• z-index values:
  • Backdrop: z-index: 9998
  • Help modal: z-index: 9999
• Result: The tutorial stands out clearly as the primary focus, while the workspace is visually de‑emphasized.

Files Changed

• dist/css/windows.css
  • Added .help-modal-backdrop styles.
  • Centered .help-modal window using fixed positioning and transform.
• js/widgets/help.js
  • Create/remove backdrop tied to Help widget lifecycle.
  • Add/remove help-modal class on widget frame.
  • Clear inline position styles to allow CSS centering.

Testing

• Ran npm run dev and tested at http://localhost:3000
• Verified the "Meet Mr. Mouse!" modal is centered horizontally and vertically
• Verified the background is dimmed while the modal is visible
• Verified the modal opens and closes without errors
• Confirmed no red errors in the browser console (F12)
• Tested in Chrome on desktop

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

SaveInterface.test.js

[badassscoder]

Hi , this is my first PR to Music Blocks. Jest tests pass, and other workflows are waiting for maintainer approval. Please let me know if any changes are needed.

[zealot-zew]

this change made 1) the tutorial window to stay in the middle and cant move it around
2)the user cant really access the blocks or tools while viewing the guide
this is not a good UI i would say

[badassscoder]

Thanks for the feedback, that makes sense. I understand now why keeping the tutorial movable and non‑blocking is better for the UX here, and the changes I made ended up hurting that behavior. @zealot-zew