refactor: move border to screen itself, and use withDefaults

app/app.vue

@@ -1,16 +1,6 @@
 <template>
-  <div class="wrapper">
+  <Screen>
-    <Screen>
+    <Background />
-      <Background />
+    <Stats />
-      <Stats />
+  </Screen>
-    </Screen>
-  </div>
 </template>
-
-<style>
-.wrapper {
-  width: fit-content;
-  height: fit-content;
-  border: 1px solid red;
-}
-</style>

app/components/Screen.vue

@@ -64,7 +64,15 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <canvas ref="canvas" :width="SCREEN_WIDTH" :height="SCREEN_HEIGHT" />
+  <canvas
+    ref="canvas"
+    :width="SCREEN_WIDTH"
+    :height="SCREEN_HEIGHT"
+    :style="{
+      margin: '0',
+      border: '1px solid red',
+    }"
+  />
 
   <slot v-if="canvas" />
 </template>

app/components/Stats.vue

@@ -1,13 +1,7 @@
 <script lang="ts" setup>
-const props = defineProps({
+const props = withDefaults(defineProps<{ x?: number; y?: number }>(), {
-  x: {
+  x: 0,
-    type: Number,
+  y: 0,
-    default: 0,
-  },
-  y: {
-    type: Number,
-    default: 0,
-  },
 });
 
 const SAMPLES = 60;