From e116d164e88a1215509f7d6549571e93f38d1348 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Mon, 23 Sep 2024 04:39:07 +0200
Subject: [PATCH] Move spoiler text to inside the button

---
 src/components/status.jsx | 28 ++++------------------------
 1 file changed, 4 insertions(+), 24 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 9ae1aa19..7d203087 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1889,21 +1889,12 @@ function Status({
               <>
                 {(!!spoilerText || !!sensitive) && !readingExpandSpoilers && (
                   <>
-                    {!!spoilerText && (
-                      <span
-                        class="spoiler-content media-first-spoiler-content"
-                        lang={language}
-                        dir="auto"
-                        ref={spoilerContentRef}
-                        data-read-more={_(readMoreText)}
-                      >
-                        <EmojiText text={spoilerText} emojis={emojis} />{' '}
-                      </span>
-                    )}
                     <button
                       class={`light spoiler-button media-first-spoiler-button ${
                         showSpoiler ? 'spoiling' : ''
                       }`}
+                      lang={language}
+                      dir="auto"
                       type="button"
                       onClick={(e) => {
                         e.preventDefault();
@@ -1922,7 +1913,7 @@ function Status({
                       }}
                     >
                       <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
-                      {showSpoiler ? t`Show less` : t`Show content`}
+                      {spoilerText ? <EmojiText text={spoilerText} emojis={emojis} /> : showSpoiler ? t`Show less` : t`Show content`}
                     </button>
                   </>
                 )}
@@ -1946,17 +1937,6 @@ function Status({
               <>
                 {!!spoilerText && (
                   <>
-                    <div
-                      class="content spoiler-content"
-                      lang={language}
-                      dir="auto"
-                      ref={spoilerContentRef}
-                      data-read-more={_(readMoreText)}
-                    >
-                      <p>
-                        <EmojiText text={spoilerText} emojis={emojis} />
-                      </p>
-                    </div>
                     {readingExpandSpoilers || previewMode ? (
                       <div class="spoiler-divider">
                         <Icon icon="eye-open" /> <Trans>Content warning</Trans>
@@ -1984,7 +1964,7 @@ function Status({
                         }}
                       >
                         <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
-                        {showSpoiler ? t`Show less` : t`Show content`}
+                        {!!spoilerText ? <EmojiText text={spoilerText} emojis={emojis} /> : showSpoiler ? t`Show less` : t`Show content`}
                       </button>
                     )}
                   </>