From 8576601b7c230b9afe48c78563d6d6ed0e70c9ce Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 5 Dec 2022 12:50:51 +0000
Subject: [PATCH] Fix replies to emotes not showing as inline (#9707)

---
 res/css/views/rooms/_ReplyTile.pcss      | 17 +++++++++++++++--
 src/components/views/rooms/ReplyTile.tsx |  1 +
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_ReplyTile.pcss b/res/css/views/rooms/_ReplyTile.pcss
index fe6235eb1e8..616f1b181fe 100644
--- a/res/css/views/rooms/_ReplyTile.pcss
+++ b/res/css/views/rooms/_ReplyTile.pcss
@@ -28,8 +28,11 @@ limitations under the License.
     }
 
     > a {
-        display: flex;
-        flex-direction: column;
+        display: grid;
+        grid-template:
+            "sender"  auto
+            "message" auto
+            / auto;
         text-decoration: none;
         color: $secondary-content;
         transition: color ease 0.15s;
@@ -58,6 +61,7 @@ limitations under the License.
 
     /* We do reply size limiting with CSS to avoid duplicating the TextualBody component. */
     .mx_EventTile_content {
+        grid-area: message;
         $reply-lines: 2;
         $line-height: $font-18px;
 
@@ -102,7 +106,16 @@ limitations under the License.
         padding-top: 0;
     }
 
+    &.mx_ReplyTile_inline > a {
+        /* Render replies to emotes inline with the sender avatar */
+        grid-template:
+            "sender        message" auto
+            / max-content  auto;
+        gap: 4px; // increase spacing
+    }
+
     .mx_ReplyTile_sender {
+        grid-area: sender;
         display: flex;
         align-items: center;
         gap: 4px;
diff --git a/src/components/views/rooms/ReplyTile.tsx b/src/components/views/rooms/ReplyTile.tsx
index cdfbce1a886..515c8975e7d 100644
--- a/src/components/views/rooms/ReplyTile.tsx
+++ b/src/components/views/rooms/ReplyTile.tsx
@@ -123,6 +123,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
         }
 
         const classes = classNames("mx_ReplyTile", {
+            mx_ReplyTile_inline: msgType === MsgType.Emote,
             mx_ReplyTile_info: isInfoMessage && !mxEvent.isRedacted(),
             mx_ReplyTile_audio: msgType === MsgType.Audio,
             mx_ReplyTile_video: msgType === MsgType.Video,