From f5f994925318c15127b64a4332c3ab12ac9aac8d Mon Sep 17 00:00:00 2001
From: ilja <git@ilja.space>
Date: Sat, 10 Aug 2024 13:13:47 +0200
Subject: [PATCH] Fix mfm-position and mfm-scale

The `span`'s needed an inline-block for the transform to wrok
I also added an `overflow: hidden;` because these functions can make the text go beyond the borders of the StatusBody
With `overflow: hidden;`, it won't show outside of the borders
---
 src/components/status_body/status_body.scss | 1 +
 src/components/status_content/mfm.scss      | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index dd1b62a5..2e3bef8c 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -3,6 +3,7 @@
 .StatusBody {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 
   .translation {
     border: 1px solid var(--accent, $fallback--link);
diff --git a/src/components/status_content/mfm.scss b/src/components/status_content/mfm.scss
index 3bcd84f3..429a79a6 100644
--- a/src/components/status_content/mfm.scss
+++ b/src/components/status_content/mfm.scss
@@ -125,10 +125,12 @@
   }
 
   .mfm-position {
+    display: inline-block;
     transform: translate(calc(var(--mfm-x, 0) * 1em), calc(var(--mfm-y, 0) * 1em));
   }
 
   .mfm-scale {
+    display: inline-block;
     transform: scale(var(--mfm-x, 1), var(--mfm-y, 1));
   }