src/game/boards/Board.vue

@@ -26,7 +26,7 @@ import type { PanZoom } from "panzoom";
 import type { ComponentPublicInstance } from "vue";
 import { computed, ref } from "vue";
 // Required to make sure panzoom component gets registered:
-import "features/boards/board";
+import "./board";
 
 defineExpose({
     panZoomInstance: computed(() => stage.value?.panZoomInstance)
@@ -90,5 +90,12 @@ function onInit(panzoomInstance: PanZoom) {
     height: calc(100% + 100px);
     margin: -50px -10px;
 }
+
+.board-node {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transition-duration: 0s;
+}
 </style>
 game/boards/board

src/game/boards/Draggable.vue

@@ -1,5 +1,6 @@
 <template>
     <div
+        class="board-node"
         :style="`transform: translate(calc(${unref(position).x}px - 50%), ${unref(position).y}px);`"
         @mousedown="e => mouseDown(e)"
         @touchstart.passive="e => mouseDown(e)"
@@ -26,12 +27,3 @@ const props = defineProps<{
 
 const comp = shallowRef(coerceComponent(jsx(() => renderJSX(props.element))));
 </script>
-
-<style scoped>
-div {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transition-duration: 0s;
-}
-</style>