fix(ui): misaligned overlay (#127)

packages/ui/src/components/viewport/View.tsx

@@ -190,7 +190,11 @@ export function View() {
             outlineWidth: `${1 / state.zoom}px`,
           }}
         >
-          <canvas key={playerState.colorSpace} ref={viewportRef} />
+          <canvas
+            className={styles.preview}
+            key={playerState.colorSpace}
+            ref={viewportRef}
+          />
         </div>
         <Grid />
         <Debug />

packages/ui/src/components/viewport/Viewport.module.scss

@@ -29,6 +29,10 @@
   outline: 1px solid var(--surface-color);
 }
 
+.preview {
+  display: block;
+}
+
 .overlay {
   position: absolute;
   top: 0;