Align the right edge of info tile lines with normal ones on IRC layout (#9058)

* Apply inline start margin to info event tile line to align the right edge with normal event tile lines

Signed-off-by: Suguru Hirahara <[email protected]>

* Rename the variable

Signed-off-by: Suguru Hirahara <[email protected]>

* Add a test to check inline start margin

Signed-off-by: Suguru Hirahara <[email protected]>

* Rerun CI

Signed-off-by: Suguru Hirahara <[email protected]>

* Improve tests a little bit

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

cypress/e2e/14-timeline/timeline.spec.ts

@@ -151,6 +151,32 @@ describe("Timeline", () => {
             cy.percySnapshot("Configured room on IRC layout");
         });
 
+        it("should add inline start margin to an event line on IRC layout", () => {
+            cy.visit("/#/room/" + roomId);
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
+
+            // Wait until configuration is finished
+            cy.contains(".mx_RoomView_body .mx_GenericEventListSummary " +
+                ".mx_GenericEventListSummary_summary", "created and configured the room.");
+
+            // Click "expand" link button
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click();
+
+            // Check the event line has margin instead of inset property
+            // cf. _EventTile.pcss
+            //  --EventTile_irc_line_info-margin-inline-start
+            //  = calc(var(--name-width) + 10px + var(--icon-width))
+            //  = 80 + 10 + 14 = 104px
+            cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line")
+                .should('have.css', "margin-inline-start", "104px")
+                .should('have.css', "inset-inline-start", "0px");
+
+            // Exclude timestamp from snapshot
+            const percyCSS = ".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp "
+                + "{ visibility: hidden !important; }";
+            cy.percySnapshot("Event line with inline start margin on IRC layout", { percyCSS });
+        });
+
         it("should click top left of view source event toggle", () => {
             sendEvent(roomId);
             cy.visit("/#/room/" + roomId);
@@ -159,11 +185,11 @@ describe("Timeline", () => {
                 ".mx_GenericEventListSummary_summary", "created and configured the room.");
 
             // Edit message
-            cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile_line", "Message").within(() => {
+            cy.contains(".mx_RoomView_body .mx_EventTile .mx_EventTile_line", "Message").within(() => {
                 cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover
                 cy.get(".mx_BasicMessageComposer_input").type("Edit{enter}");
             });
-            cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", "MessageEdit");
+            cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "MessageEdit");
 
             // Click top left of the event toggle, which should not be covered by MessageActionBar's safe area
             cy.get(".mx_EventTile .mx_ViewSourceEvent").realHover()

res/css/views/rooms/_EventTile.pcss

@@ -274,7 +274,7 @@ $left-gutter: 64px;
     }
 
     &[data-layout="irc"] {
-        --EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
+        --EventTile_irc_line_info-margin-inline-start: calc(var(--name-width) + 10px + var(--icon-width));
 
         .mx_EventTile_msgOption {
             .mx_ReadReceiptGroup {
@@ -288,7 +288,7 @@ $left-gutter: 64px;
 
         .mx_EventTileBubble {
             position: relative;
-            left: var(--EventTile_irc_line_info-inset-inline-start);
+            left: var(--EventTile_irc_line_info-margin-inline-start);
 
             &.mx_cryptoEvent {
                 left: unset;
@@ -308,11 +308,15 @@ $left-gutter: 64px;
 
         &.mx_EventTile_info {
             .mx_EventTile_avatar {
-                left: var(--EventTile_irc_line_info-inset-inline-start);
+                left: var(--EventTile_irc_line_info-margin-inline-start);
                 top: 0;
                 margin-right: var(--right-padding);
                 padding-block: var(--EventTile_irc_line-padding-block);
             }
+
+            .mx_EventTile_line {
+                margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start);
+            }
         }
     }
 

res/css/views/rooms/_IRCLayout.pcss

@@ -161,10 +161,6 @@ $irc-line-height: $font-18px;
     }
 
     .mx_EventTile.mx_EventTile_info {
-        .mx_EventTile_line {
-            left: var(--EventTile_irc_line_info-inset-inline-start);
-        }
-
         .mx_ViewSourceEvent, // For hidden events
         .mx_TextualEvent {
             line-height: $irc-line-height;