From c2c82b5e8fb6bd34fe89efa9cdc3eee3c353c6f7 Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Wed, 13 May 2026 18:25:28 -0500
Subject: [PATCH] fix: spoilers leaking emojis and mentions

---
 .../fix-spoiler-hides-mentions-and-images.md  |  5 +++
 src/app/styles/CustomHtml.css.ts              | 32 +++++++++++--------
 2 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/fix-spoiler-hides-mentions-and-images.md

diff --git a/.changeset/fix-spoiler-hides-mentions-and-images.md b/.changeset/fix-spoiler-hides-mentions-and-images.md
new file mode 100644
index 000000000..cf52327b5
--- /dev/null
+++ b/.changeset/fix-spoiler-hides-mentions-and-images.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix spoilers not hiding nested content like mentions, emoji images, and custom-colored spans.
diff --git a/src/app/styles/CustomHtml.css.ts b/src/app/styles/CustomHtml.css.ts
index 81d841faa..592a63aa3 100644
--- a/src/app/styles/CustomHtml.css.ts
+++ b/src/app/styles/CustomHtml.css.ts
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 import { color, config, DefaultReset, toRem } from 'folds';
 import { ContainerColor } from './ContainerColor.css';
@@ -60,20 +60,26 @@ export const Code = style([
   },
 ]);
 
-export const Spoiler = recipe({
-  base: [
-    DefaultReset,
-    {
-      padding: `0 ${config.space.S100}`,
-      backgroundColor: color.SurfaceVariant.ContainerLine,
-      borderRadius: config.radii.R300,
-      selectors: {
-        '&[aria-pressed=true]': {
-          color: 'transparent',
-        },
+const SpoilerBase = style([
+  DefaultReset,
+  {
+    padding: `0 ${config.space.S100}`,
+    backgroundColor: color.SurfaceVariant.ContainerLine,
+    borderRadius: config.radii.R300,
+    selectors: {
+      '&[aria-pressed=true]': {
+        color: 'transparent',
       },
     },
-  ],
+  },
+]);
+
+globalStyle(`${SpoilerBase}[aria-pressed="true"] *`, {
+  visibility: 'hidden',
+});
+
+export const Spoiler = recipe({
+  base: SpoilerBase,
   variants: {
     active: {
       true: {