Fix edited reply quote collapse (#33487)

* Fix edited reply quote collapse

* Add regression test for edited reply quotes

apps/web/res/css/views/rooms/_ReplyTile.pcss

@@ -66,6 +66,12 @@ Please see LICENSE files in the repository root for full details.
             display: inline;
         }
 
+        // The annotation wrapper is flex in normal timeline messages, but that stops
+        // -webkit-line-clamp from trimming long edited quotes down to two lines.
+        [data-textual-body-annotation-wrapper] {
+            display: contents;
+        }
+
         // Hide line numbers and edited indicator
         .mx_EventTile_lineNumbers,
         [data-textual-body-edited-marker] {

apps/web/test/unit-tests/components/views/elements/ReplyChain-test.tsx

@@ -59,4 +59,78 @@ describe("ReplyChain", () => {
         await waitFor(() => expect(setQuoteExpanded).toHaveBeenCalledWith(false));
         expect(asFragment()).toMatchSnapshot();
     });
+
+    it("keeps long edited reply quotes collapsible", async () => {
+        // Jest/JSDOM won't set clientHeight/scrollHeight for us so we have to synthesise it
+        jest.spyOn(Element.prototype, "clientHeight", "get").mockReturnValue(100);
+        jest.spyOn(Element.prototype, "scrollHeight", "get").mockReturnValue(150);
+
+        const cli = stubClient();
+        const { room_id: roomId } = await cli.createRoom({});
+        const room = cli.getRoom(roomId)!;
+        const longBody = Array.from({ length: 80 }, (_, index) => `word${index}`).join(" ");
+        const editedLongBody = `${longBody} edited`;
+
+        const targetEv = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: cli.getUserId()!,
+            room: roomId,
+            id: "$event1",
+            content: {
+                body: longBody,
+                msgtype: "m.text",
+            },
+        });
+        const editEv = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: cli.getUserId()!,
+            room: roomId,
+            id: "$event1-edit",
+            content: {
+                "body": `* ${editedLongBody}`,
+                "msgtype": "m.text",
+                "m.new_content": {
+                    body: editedLongBody,
+                    msgtype: "m.text",
+                },
+            },
+        });
+        jest.spyOn(targetEv, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3));
+        targetEv.makeReplaced(editEv);
+        jest.spyOn(room, "findEventById").mockReturnValue(targetEv);
+
+        const parentEv = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: cli.getUserId()!,
+            room: roomId,
+            id: "$event2",
+            content: {
+                "body": "Reply",
+                "msgtype": "m.text",
+                "m.relates_to": {
+                    "m.in_reply_to": {
+                        event_id: "$event1",
+                    },
+                },
+            },
+        });
+        const setQuoteExpanded = jest.fn();
+        const { container } = render(
+            <ReplyChain parentEv={parentEv} setQuoteExpanded={setQuoteExpanded} />,
+            withClientContextRenderOptions(cli),
+        );
+
+        await waitFor(() => expect(setQuoteExpanded).toHaveBeenCalledWith(false));
+        await waitFor(() => expect(container).toHaveTextContent(editedLongBody));
+
+        const replyTile = container.querySelector(".mx_ReplyTile");
+        expect(replyTile).not.toBeNull();
+        const annotationWrapper = replyTile!.querySelector("[data-textual-body-annotation-wrapper]");
+        expect(annotationWrapper).not.toBeNull();
+        expect(annotationWrapper).toContainElement(replyTile!.querySelector(".mx_EventTile_body"));
+        expect(annotationWrapper).toContainElement(replyTile!.querySelector("[data-textual-body-edited-marker]"));
+    });
 });

packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx

@@ -255,14 +255,16 @@ export function TextualBodyView({
             [styles.annotatedInline]: kind === TextualBodyViewKind.EMOTE,
         });
 
+        // Reply quotes need to tweak this wrapper so long edited messages still clamp nicely.
+        // Keep this hook stable so app CSS doesn't have to reach into CSS-module class names.
         renderedBody =
             kind === TextualBodyViewKind.EMOTE ? (
-                <span dir="auto" className={annotatedClasses}>
+                <span dir="auto" className={annotatedClasses} data-textual-body-annotation-wrapper="">
                     {renderedBody}
                     {markers}
                 </span>
             ) : (
-                <div dir="auto" className={annotatedClasses}>
+                <div dir="auto" className={annotatedClasses} data-textual-body-annotation-wrapper="">
                     {renderedBody}
                     {markers}
                 </div>

packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap

@@ -33,6 +33,7 @@ exports[`TextualBodyView > renders emote messages with annotations 1`] = `
      
     <span
       class="TextualBody-module_annotated TextualBody-module_annotatedInline"
+      data-textual-body-annotation-wrapper=""
       dir="auto"
     >
       <span>