fix: add canvas-wrapper to breakout task

Author: joshunrau

packages/instrument-library/src/interactive/breakout-task/index.ts

@@ -12,10 +12,15 @@ export default defineInstrument({
     render(done) {
       const startTime = Date.now();
 
+      const wrapper = document.createElement('div');
+      wrapper.classList.add('canvas-wrapper');
+
       const canvas = document.createElement('canvas');
       canvas.height = 320;
       canvas.width = 480;
-      document.body.appendChild(canvas);
+
+      wrapper.appendChild(canvas);
+      document.body.appendChild(wrapper);
 
       const ctx = canvas.getContext('2d')!;
       const ballRadius = 10;

packages/instrument-library/src/interactive/breakout-task/styles.css

@@ -8,3 +8,11 @@ canvas {
   display: block;
   margin: 0 auto;
 }
+
+.canvas-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+}