Colored region annotations do not respond well to changing width

Bug description and expected behavior

A clear and concise description of what the bug is, and what you expected to happen.

In the web app, colored overlays are applied on top of the images to highlight specific areas of the bones. These look fine when the image is at full width, but if the viewing window is narrow (e.g. if the user resizes their browser window), they may be overlaid on the wrong parts of the image and therefore be inaccurate. This affects how they are overlaid both in the main viewing interface and in the quiz interface.

Some of them seem to scale well, and some do not. Identify the root cause and fix it.

Steps to reproduce

A list of steps it takes to see this bug.

1. Open the web app homepage.
2. Select any subbone from the dropdowns that has colored region annotations.
3. Resize the width of the browser window.

Acceptance Criteria

A checklist of conditions that must be met for this task to be considered complete. How will we verify that it's done correctly?

• The buggy behavior no longer occurs.
• All related code passes the repository's workflow checks (linting, tests).
• The application runs without new errors after the changes are made.
• (If applicable) New automated tests have been added to cover the changes.
• Any related documentation has been updated, including JSDoc comments or docstrings

Additional context

Add any other context or screenshots about the bug here.

See also #238, which is a similar bug regarding the text label annotations.

Here are some videos displaying the bug in action:

https://github.com/user-attachments/assets/60cde146-306a-4c20-826f-a6e45464a507

https://github.com/user-attachments/assets/fcff88ca-e4cf-417d-84a2-5058ff72bb57

Start by opening the web app homepage and reproducing the overlay misalignment while resizing the browser window. Compare colored region rendering in the main viewing interface and quiz interface, and use the related issue #238 for context. Done means annotations remain aligned at narrow and full widths, with repository workflow checks passing.