From 3cdb990ea2a001e1be9a57b207d1d93ba9ee5956 Mon Sep 17 00:00:00 2001
From: FloatingGhost <hannah@coffee-and-dreams.uk>
Date: Wed, 7 Dec 2022 11:01:58 +0000
Subject: [PATCH] Ensure only content gets clipped

---
 src/components/status/status.scss             |  4 ++
 src/components/status/status.vue              | 37 ++++++++++---------
 .../status_content/status_content.vue         |  1 -
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 8b8b2add..cd65b890 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -42,6 +42,10 @@
     display: flex;
     padding: var(--status-margin, $status-margin);
 
+    .content {
+      overflow: hidden;
+    }
+
     > * {
       min-width: 0;
     }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 24f64248..c9ce4a8a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -352,22 +352,25 @@
             </div>
           </div>
 
-          <StatusContent
-            ref="content"
-            :status="status"
-            :no-heading="noHeading"
-            :highlight="highlight"
-            :focused="isFocused"
-            :controlled-showing-tall="controlledShowingTall"
-            :controlled-expanding-subject="controlledExpandingSubject"
-            :controlled-showing-long-subject="controlledShowingLongSubject"
-            :controlled-toggle-showing-tall="controlledToggleShowingTall"
-            :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
-            :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
-            @mediaplay="addMediaPlaying($event)"
-            @mediapause="removeMediaPlaying($event)"
-            @parseReady="setHeadTailLinks"
-          />
+          <div class="content">
+            <StatusContent
+              ref="content"
+              class="status-content"
+              :status="status"
+              :no-heading="noHeading"
+              :highlight="highlight"
+              :focused="isFocused"
+              :controlled-showing-tall="controlledShowingTall"
+              :controlled-expanding-subject="controlledExpandingSubject"
+              :controlled-showing-long-subject="controlledShowingLongSubject"
+              :controlled-toggle-showing-tall="controlledToggleShowingTall"
+              :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
+              :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
+              @mediaplay="addMediaPlaying($event)"
+              @mediapause="removeMediaPlaying($event)"
+              @parseReady="setHeadTailLinks"
+            />
+          </div>
 
           <div
             v-if="inConversation && !isPreview && replies && replies.length"
@@ -534,6 +537,6 @@
   </div>
 </template>
 
-<script src="./status.js" ></script>
+<script src="./status.js"></script>
 
 <style src="./status.scss" lang="scss"></style>
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 245cd6e9..ab13141e 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -68,7 +68,6 @@
 .StatusContent {
   flex: 1;
   min-width: 0;
-  overflow: hidden;
 
   img, video {
     &.emoji {