Colored region annotations do not respond well to changing width #318
Description
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.
- Open the web app homepage.
- Select any subbone from the dropdowns that has colored region annotations.
- 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: