Apply inline start padding to selected lines on modern layout only

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

@@ -151,6 +151,41 @@ describe("Timeline", () => {
             cy.percySnapshot("Configured room on IRC layout");
         });
 
+        it("should set inline start padding to a hidden event line", () => {
+            sendEvent(roomId);
+            cy.visit("/#/room/" + roomId);
+            cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
+            cy.contains(".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary",
+                "created and configured the room.");
+
+            // Edit message
+            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");
+
+            // Click timestamp to highlight hidden event line
+            cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click();
+
+            // Exclude timestamp from snapshot
+            const percyCSS = ".mx_RoomView_body .mx_EventTile .mx_MessageTimestamp "
+                + "{ visibility: hidden !important; }";
+
+            // should not add inline start padding to a hidden event line on IRC layout
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
+            cy.get(".mx_EventTile[data-layout=irc].mx_EventTile_info .mx_EventTile_line")
+                .should('have.css', 'padding-inline-start', '0px');
+            cy.percySnapshot("Hidden event line with zero padding on IRC layout", { percyCSS });
+
+            // should add inline start padding to a hidden event line on modern layout
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);
+            cy.get(".mx_EventTile[data-layout=group].mx_EventTile_info .mx_EventTile_line")
+                // calc(var(--EventTile_group_line-spacing-inline-start) + 20px) = 64 + 20 = 84px
+                .should('have.css', 'padding-inline-start', '84px');
+            cy.percySnapshot("Hidden event line with padding on modern layout", { percyCSS });
+        });
+
         it("should click top left of view source event toggle", () => {
             sendEvent(roomId);
             cy.visit("/#/room/" + roomId);
@@ -159,7 +194,7 @@ 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}");
             });

res/css/views/rooms/_EventTile.pcss

@@ -420,6 +420,11 @@ $left-gutter: 64px;
                     top: 0;
                 }
             }
+
+            &.mx_EventTile_selected .mx_EventTile_line {
+                // TODO: check if this would be necessary
+                padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
+            }
         }
 
         &:hover {
@@ -462,10 +467,6 @@ $left-gutter: 64px;
     padding-top: 18px;
     font-size: $font-14px;
     position: relative;
-
-    &.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
-        padding-left: calc($left-gutter + 18px);
-    }
 }
 
 .mx_GenericEventListSummary {
@@ -500,7 +501,8 @@ $left-gutter: 64px;
         }
 
         .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
-            padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+            // override padding-left $left-gutter
+            padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
         }
     }
 }