Add space for vertical stroke on message edit composer on Rich Text Editor mode

cypress/e2e/composer/composer.spec.ts

@@ -18,10 +18,31 @@ limitations under the License.
 
 import { HomeserverInstance } from "../../plugins/utils/homeserver";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { Layout } from "../../../src/settings/enums/Layout";
 
 describe("Composer", () => {
     let homeserver: HomeserverInstance;
 
+    const checkEditComposerIRC = () => {
+        // Enable IRC layout
+        cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
+
+        // Assert the IRC layout is enabled
+        cy.get(".mx_EventTile_isEditing[data-layout=irc]").within(() => {
+            cy.get(".mx_EditComposer")
+                // Assert there is space for the vertical stroke on IRC layout
+                // $selected-message-border-width + var(--EditComposer-padding-inline) = 4 + 3 = 7px
+                .should("have.css", "padding-inline-start", "7px")
+                .within(() => {
+                    // Assert that the textbox is rendered
+                    cy.findByRole("textbox").should("exist");
+                });
+        });
+    };
+
+    // Hide message timestamp on Percy snapshots
+    const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
+
     beforeEach(() => {
         cy.startHomeserver("default").then((data) => {
             homeserver = data;
@@ -106,6 +127,24 @@ describe("Composer", () => {
                 });
             });
         });
+
+        describe("EditComposer", () => {
+            beforeEach(() => {
+                // Send a message and click "Edit" button to display EditComposer
+                cy.findByRole("textbox").type("Message{enter}");
+                cy.get(".mx_EventTile_last").realHover().findByRole("button", { name: "Edit" }).click();
+                cy.get(".mx_EventTile_last").findByRole("textbox").should("exist");
+            });
+
+            it("should be rendered properly on IRC layout", () => {
+                checkEditComposerIRC();
+
+                cy.get(".mx_EventTile_isEditing").percySnapshotElement("EditComposer on EventTile - CIDER", {
+                    percyCSS,
+                    widths: [400, 800], // magic numbers to emulate the actual UI
+                });
+            });
+        });
     });
 
     describe("Rich text editor", () => {
@@ -271,5 +310,23 @@ describe("Composer", () => {
                 cy.get(".mx_EventTile_body a").should("have.attr", "href").and("include", "https://matrix.org/");
             });
         });
+
+        describe("EditComposer", () => {
+            beforeEach(() => {
+                // Send a message and click "Edit" button to display EditComposer
+                cy.findByRole("textbox").type("Message{enter}");
+                cy.get(".mx_EventTile_last").realHover().findByRole("button", { name: "Edit" }).click();
+                cy.get(".mx_EventTile_last").findByRole("textbox").should("exist");
+            });
+
+            it("should be rendered properly on IRC layout", () => {
+                checkEditComposerIRC();
+
+                cy.get(".mx_EventTile_isEditing").percySnapshotElement("EditComposer on EventTile - Rich Text Editor", {
+                    percyCSS,
+                    widths: [400, 800], // magic numbers to emulate the actual UI
+                });
+            });
+        });
     });
 });

res/css/_common.pcss

@@ -45,6 +45,7 @@ $timeline-image-border-radius: 8px;
     --MessageTimestamp-width: $MessageTimestamp_width;
     --buttons-dialog-gap-row: $spacing-8;
     --buttons-dialog-gap-column: $spacing-8;
+    --EditComposer-padding-inline: 3px;
 }
 
 @media only percy {

res/css/views/rooms/_EditMessageComposer.pcss

@@ -16,14 +16,12 @@ limitations under the License.
 */
 
 .mx_EditMessageComposer {
-    --EditMessageComposer-padding-inline: 3px;
-
     display: flex;
     flex-direction: column;
     max-width: 100%; /* disable overflow */
     width: auto;
     gap: 5px;
-    padding: 3px var(--EditMessageComposer-padding-inline);
+    padding: 3px var(--EditComposer-padding-inline);
 
     .mx_BasicMessageComposer_input {
         border-radius: 4px;

res/css/views/rooms/_EventTile.pcss

@@ -315,9 +315,9 @@ $left-gutter: 64px;
         }
 
         &.mx_EventTile_isEditing > .mx_EventTile_line {
-            .mx_EditMessageComposer {
+            .mx_EditComposer {
                 /* add space for the stroke on box-shadow */
-                padding-inline-start: calc($selected-message-border-width + var(--EditMessageComposer-padding-inline));
+                padding-inline-start: calc($selected-message-border-width + var(--EditComposer-padding-inline));
             }
         }
 

src/components/views/rooms/EditMessageComposer.tsx

@@ -462,7 +462,10 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
         if (!room) return null;
 
         return (
-            <div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this.onKeyDown}>
+            <div
+                className={classNames("mx_EditComposer mx_EditMessageComposer", this.props.className)}
+                onKeyDown={this.onKeyDown}
+            >
                 <BasicMessageComposer
                     ref={this.editorRef}
                     model={this.model}

src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx

@@ -65,7 +65,7 @@ export default function EditWysiwygComposer({
     return (
         <ComposerContext.Provider value={defaultContextValue.current}>
             <WysiwygComposer
-                className={classNames("mx_EditWysiwygComposer", className)}
+                className={classNames("mx_EditComposer mx_EditWysiwygComposer", className)}
                 initialContent={initialContent}
                 onChange={onChange}
                 onSend={editMessage}