Add UI to change verification grid size

[hudson-newey]

Add UI to change verification grid size

This pull request exposes a user interface to change the verification grid size after creation

Changes

Features

• Adds a button to change the verification grid size

Bug Fixes

• Fix a bug where increasing the grid size after initalization would not cause the new spectrograms to generate
• Fix a bug where if the same URL was used for two grid tiles in the same position, the subject model would not update

Code Quality

• Corrects typing of media controls changeNumberHandlerEvent callback to a HTMLInputElement Event instead of a SLMenuItem event

Remaining Bugs / Unresolved Problems

Because this PR exposes the verification grid size to the user #146, and #147 become much more prevelant because the user can input grid sizes that (obviously) won't fit on their screen and start scrolling.

Visual Changes

A new scrollbar + label that can be used to change the verification grid size

Media controls now has a wrapper around the range inputs

Related Issues

Fixes: #137

Additional Notes

N.A.

Final Checklist

• [ ] All commits messages are semver compliant
• [x] Added relevant unit tests for new functionality
• [x] Updated existing unit tests to reflect changes
• [x] Code style is consistent with the project guidelines
• [ ] Documentation is updated to reflect the changes (if applicable)
• [x] Link issues related to the PR
• [x] Assign labels if you have permission
• [x] Assign reviewers if you have permission
• [x] Ensure that CI is passing
• [x] Ensure that pnpm lint runs without any errors
• [x] Ensure that pnpm test runs without any errors

[github-actions[bot]]

🚀 Deployed on https://66bae5fb665218ac29b2ef3b--oe-web-components.netlify.app

[atruskie]

Observations when playing with the demo:

1. Reducing the grid size has an error where size ends up as one

2. The page scrolls around confusingly and can push the control bar off screen (separate issue I suppose)

3. The control is not reactive