Fix reply message truncation on 2 lines (#12929)

* Fix reply message truncation on 2 lines

* Add e2e tests for reply

playwright/e2e/messages/messages.spec.ts

@@ -24,7 +24,34 @@ async function sendMessage(page: Page, message: string): Promise<Locator> {
     await page.getByRole("textbox", { name: "Send a message…" }).fill(message);
     await page.getByRole("button", { name: "Send message" }).click();
 
-    const msgTile = await page.locator(".mx_EventTile_last");
+    const msgTile = page.locator(".mx_EventTile_last");
+    await msgTile.locator(".mx_EventTile_receiptSent").waitFor();
+    return msgTile;
+}
+
+async function sendMultilineMessages(page: Page, messages: string[]) {
+    await page.getByRole("textbox", { name: "Send a message…" }).focus();
+    for (let i = 0; i < messages.length; i++) {
+        await page.keyboard.type(messages[i]);
+        if (i < messages.length - 1) await page.keyboard.press("Shift+Enter");
+    }
+
+    await page.getByRole("button", { name: "Send message" }).click();
+
+    const msgTile = page.locator(".mx_EventTile_last");
+    await msgTile.locator(".mx_EventTile_receiptSent").waitFor();
+    return msgTile;
+}
+
+async function replyMessage(page: Page, message: Locator, replyMessage: string): Promise<Locator> {
+    const line = message.locator(".mx_EventTile_line");
+    await line.hover();
+    await line.getByRole("button", { name: "Reply", exact: true }).click();
+
+    await page.getByRole("textbox", { name: "Send a reply…" }).fill(replyMessage);
+    await page.getByRole("button", { name: "Send message" }).click();
+
+    const msgTile = page.locator(".mx_EventTile_last");
     await msgTile.locator(".mx_EventTile_receiptSent").waitFor();
     return msgTile;
 }
@@ -88,6 +115,22 @@ test.describe("Message rendering", () => {
                 });
             });
 
+            test("should render a reply of a LTR message", async ({ page, user, app, room }) => {
+                await page.goto(`#/room/${room.roomId}`);
+
+                const msgTile = await sendMultilineMessages(page, [
+                    "Fist line",
+                    "Second line",
+                    "Third line",
+                    "Fourth line",
+                ]);
+
+                await replyMessage(page, msgTile, "response to multiline message");
+                await expect(msgTile).toMatchScreenshot(`reply-message-ltr-${direction}displayname.png`, {
+                    mask: [page.locator(".mx_MessageTimestamp")],
+                });
+            });
+
             test("should render a basic RTL text message", async ({ page, user, app, room }) => {
                 await page.goto(`#/room/${room.roomId}`);
 
@@ -122,6 +165,22 @@ test.describe("Message rendering", () => {
                     mask: [page.locator(".mx_MessageTimestamp")],
                 });
             });
+
+            test("should render a reply of a RTL message", async ({ page, user, app, room }) => {
+                await page.goto(`#/room/${room.roomId}`);
+
+                const msgTile = await sendMultilineMessages(page, [
+                    "مرحبا بالعالم!",
+                    "مرحبا بالعالم!",
+                    "مرحبا بالعالم!",
+                    "مرحبا بالعالم!",
+                ]);
+
+                await replyMessage(page, msgTile, "مرحبا بالعالم!");
+                await expect(msgTile).toMatchScreenshot(`reply-message-trl-${direction}displayname.png`, {
+                    mask: [page.locator(".mx_MessageTimestamp")],
+                });
+            });
         });
     });
 });

res/css/views/elements/_ReplyChain.pcss

@@ -25,7 +25,7 @@ limitations under the License.
             white-space: nowrap; /* Enforce 'In reply to' to be a single line */
             color: $secondary-content;
             transition: color ease 0.15s;
-            font-weight: var(--cpd-font-weight-normal);
+            font-weight: var(--cpd-font-weight-regular);
             text-decoration: inherit;
 
             &:hover {

res/css/views/rooms/_EventTile.pcss

@@ -126,7 +126,8 @@ $left-gutter: 64px;
 
     .mx_ReplyChain--expanded {
         .mx_EventTile_body {
-            display: block;
+            /* !important needed to override .mx_ReplyTile .mx_EventTile_content .mx_EventTile_body */
+            display: block !important;
             overflow-y: scroll;
         }
 

res/css/views/rooms/_ReplyTile.pcss

@@ -77,6 +77,11 @@ limitations under the License.
             font-size: $font-14px !important; /* Override the big emoji override */
         }
 
+        // in order to keep the message on two lines, we need to make the body inline
+        .mx_EventTile_body {
+            display: inline;
+        }
+
         // Hide line numbers and edited indicator
         .mx_EventTile_lineNumbers,
         .mx_EventTile_edited {