fix: spoiler now work in paragraph wrapped elements

src/components/shortcodes/Spoiler.astro

@@ -1,11 +1,21 @@
 ---
 const { tip = '' } = Astro.props
 ---
-{/* TODO: make it work in paragraph wrapped elements */}
 <span class="spoiler" title={tip}>
     <slot/>
 </span>
 <style>
+    :global(.spoiler p) {
+        background-color: #252525;
+        color: #252525;
+        transition: color 0.5s;
+        width: fit-content;
+    }
+
+    :global(.spoiler:hover p) {
+        color: #ffffff;
+    }
+
     .spoiler {
         background-color: #252525;
         color: #252525;

src/content/pages/test.mdx

@@ -14,4 +14,9 @@ testestestest
     ~~This is the content of the spoiler.~~
 </Spoiler>
 
+<Spoiler tip="Spoiler Title">
+    ~~This is the content of another spoiler.~~
+</Spoiler>
+
+
 <FediStatuses instanceDomain='portal.gb0.dev' userId='me' />