Style code refactoring.

src/constants/code/Backgrounds/balatroCode.ts

@@ -6,9 +6,9 @@ export const balatro: CodeObject = {
   installation: `npm install ogl`,
   usage: `<template>
     <Balatro
-    isRotate={false}
+    :is-rotate="false"
-    mouseInteraction={true}
+    :mouse-interaction="true"
-    pixelFilter={700}
+    :pixel-filter="700"
     />
 </template>
 

src/content/Backgrounds/Balatro/Balatro.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" :class="className" :style="style" class="balatro-container" />
+  <div ref="containerRef" :class="className" :style="style" class="w-full h-full" />
 </template>
 
 <script setup lang="ts">
@@ -271,10 +271,3 @@ watch(
   }
 );
 </script>
-
-<style scoped>
-.balatro-container {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/demo/Backgrounds/BalatroDemo.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="balatro-demo">
   <TabbedLayout>
     <template #preview>
-        <div class="demo-container" style="height: 500px">
+      <div class="demo-container">
         <Balatro
           :is-rotate="rotate"
           :mouse-interaction="mouseInteractionEnabled"
@@ -44,7 +43,6 @@
       <CliInstallation :command="balatro.cli" />
     </template>
   </TabbedLayout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -157,5 +155,6 @@ const propData = [
   overflow: hidden;
   padding: 0;
   z-index: 1;
+  height: 500px;
 }
 </style>