fix(overlays): correct positioning of html layers

twirapp · Sep 18, 2023 · af7c5f9 · af7c5f9
1 parent bc9b366
commit af7c5f9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/frontend/overlays/src/components/htmlLayer.vue b/frontend/overlays/src/components/htmlLayer.vue
@@ -19,14 +19,14 @@ defineProps<{
 		}}
 	</component>
 	<div
+		:id="'layer' + layer.id"
 		style="position: absolute; overflow: hidden; 'text-wrap': 'nowrap'"
 		:style="{
-			top: layer.pos_y,
-			left: layer.pos_x,
-			width: layer.width,
-			height: layer.height,
+			top: `${layer.pos_y}px`,
+			left: `${layer.pos_x}px`,
+			width: `${layer.width}px`,
+			height: `${layer.height}px`,
 		}"
-		:id="'layer' + layer.id"
 		v-html="parsedData"
 	/>
 </template>
diff --git a/frontend/overlays/src/pages/overlays.vue b/frontend/overlays/src/pages/overlays.vue
@@ -2,8 +2,8 @@
 import { watch } from 'vue';
 import { useRoute } from 'vue-router';
 
-import { useOverlays } from '../sockets/overlays';
 import htmlLayer from '../components/htmlLayer.vue';
+import { useOverlays } from '../sockets/overlays';
 
 const route = useRoute();
 
@@ -38,7 +38,7 @@ watch(layers, (l) => {
 
 <style scoped>
 .container {
-	width: '100%';
-	height: '100%';
+	width: 100%;
+	height: 100%;
 }
 </style>