[Backport staging] Fix replies to emotes not showing as inline (#9708)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/rooms/_ReplyTile.pcss

@@ -28,8 +28,11 @@ limitations under the License.
     }
 
     > a {
-        display: flex;
+        display: grid;
-        flex-direction: column;
+        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;

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,