TS Fixes + Demo Cleanup

src/demo/Backgrounds/AuroraDemo.vue

@@ -98,9 +98,3 @@ const propData = [
   { name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/BalatroDemo.vue

@@ -144,9 +144,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/BeamsDemo.vue

@@ -122,9 +122,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/FaultyTerminalDemo.vue

@@ -194,9 +194,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/GalaxyDemo.vue

@@ -174,9 +174,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/GradientBlindsDemo.vue

@@ -182,9 +182,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/GridDistortionDemo.vue

@@ -102,9 +102,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/GridMotionDemo.vue

@@ -49,9 +49,3 @@ const imageUrl =
 const numberOfImages = 30;
 const images = Array.from({ length: numberOfImages }, () => imageUrl);
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/HyperspeedDemo.vue

@@ -64,9 +64,3 @@ const options = [
   { value: 'six', label: 'Deep' }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/IridescenceDemo.vue

@@ -84,9 +84,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/LetterGlitchDemo.vue

@@ -116,9 +116,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/LightRaysDemo.vue

@@ -180,9 +180,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/LightningDemo.vue

@@ -72,9 +72,3 @@ const propData = [
   { name: 'size', type: 'number', default: '1', description: 'Scale factor for the bolt size.' }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/LiquidChromeDemo.vue

@@ -1,7 +1,7 @@
 <template>
   <TabbedLayout>
     <template #preview>
-      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
+      <div class="h-[600px] overflow-hidden demo-container">
         <LiquidChrome :baseColor="baseColor" :speed="speed" :amplitude="amplitude" :interactive="interactive" />
         <BackgroundContent pill-text="New Background" headline="Swirl around in the deep sea of liquid chrome!" />
       </div>
@@ -103,9 +103,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/ParticlesDemo.vue

@@ -133,9 +133,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/PixelBlastDemo.vue

@@ -190,9 +190,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/PlasmaDemo.vue

@@ -104,9 +104,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/PrismDemo.vue

@@ -166,9 +166,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/PrismaticBurstDemo.vue

@@ -146,9 +146,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/RippleGridDemo.vue

@@ -168,9 +168,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/SilkDemo.vue

@@ -70,9 +70,3 @@ const propData = [
   { name: 'style', type: 'CSSProperties', default: '{}', description: 'Inline styles for the component.' }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/SquaresDemo.vue

@@ -118,9 +118,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/ThreadsDemo.vue

@@ -79,9 +79,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>

src/demo/Backgrounds/WavesDemo.vue

@@ -100,9 +100,3 @@ const propData = [
   }
 ];
 </script>
-
-<style scoped>
-.demo-container {
-  padding: 0;
-}
-</style>