Fix displaying hidden events on threads (#8555)

* Fix avatar size and style inheritances for hidden events in the thread view

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use a variable

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Reset the comment

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Re-add padding-left override for bubble layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Add a empty line

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Adjust avatar and E2E icon position inside .mx_EventTile_info

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Update src/components/views/rooms/EventTile.tsx

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Align with mx_EventTile_line

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Align mx_EventTile_line and avatar + E2E icon

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/right_panel/_ThreadPanel.scss

@@ -191,10 +191,16 @@ limitations under the License.
         }
     }
 
-    .mx_GenericEventListSummary > .mx_EventTile_line {
+    .mx_GenericEventListSummary {
+        &[data-layout=bubble] > .mx_EventTile_line {
             padding-left: 30px !important; // Override main timeline styling - align summary text with message text
         }
 
+        &:not([data-layout=bubble]) > .mx_EventTile_line {
+            padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
+        }
+    }
+
     .mx_EventTile:not([data-layout=bubble]) {
         .mx_EventTile_e2eIcon {
             left: 8px;
@@ -237,29 +243,51 @@ limitations under the License.
         color: $secondary-content;
     }
 
+    &.mx_ThreadView .mx_EventTile {
         // handling for hidden events (e.g reactions) in the thread view
-    &.mx_ThreadView .mx_EventTile_info {
+        &.mx_EventTile_info {
-        padding-top: 0 !important; // override main timeline padding
+            padding-top: 0;
 
+            &.mx_EventTile_selected .mx_EventTile_line,
             .mx_EventTile_line {
-            padding-left: 0 !important; // override main timeline padding
+                $line-height: $font-12px;
 
-            .mx_EventTile_content {
+                padding-inline-start: 0;
-                margin-left: 48px; // align with text
+                line-height: $line-height;
-                width: calc(100% - 48px - 8px); // match width of parent
+
+                .mx_EventTile_content,
+                .mx_RedactedBody {
+                    width: auto;
+                    margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); // 14px: avatar width, 6px: 20px - 14px
+                    font-size: $line-height;
+                }
+            }
+
+            &:not([data-layout=bubble]) {
+                .mx_EventTile_avatar {
+                    top: 1.5px;
+                    left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
+                    z-index: 9; // position above the hover styling
+                }
+            }
+
+            &[data-layout=bubble] {
+                .mx_EventTile_avatar {
+                    left: 30px;
                 }
             }
 
             .mx_EventTile_avatar {
                 position: absolute;
-            left: 30px !important; // override main timeline positioning
+                width: 14px; // avatar img size
-            z-index: 9; // position above the hover styling
+                height: 14px; // avatar img size
             }
 
             .mx_ViewSourceEvent_toggle {
                 display: none; // hide the hidden event expand button, not enough space, view source can still be used
             }
         }
+    }
 
     .mx_BaseCard_footer {
         text-align: left;

res/css/views/rooms/_EventTile.scss

@@ -89,10 +89,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         margin-left: 64px;
     }
 
-    &.mx_EventTile_info {
-        padding-top: 1px;
-    }
-
     .mx_EventTile_avatar {
         top: 14px;
         left: 8px;
@@ -100,9 +96,27 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         user-select: none;
     }
 
-    &.mx_EventTile_info .mx_EventTile_avatar {
+    &.mx_EventTile_info {
-        top: $font-6px;
+        padding-top: 0;
-        left: $left-gutter;
+
+        .mx_EventTile_avatar,
+        .mx_EventTile_e2eIcon {
+            margin: 3px 0 2px; // Align with mx_EventTile_line
+        }
+
+        .mx_EventTile_e2eIcon {
+            top: 0;
+        }
+
+        .mx_EventTile_avatar {
+            top: initial;
+            inset-inline-start: $left-gutter;
+            height: 14px;
+        }
+
+        .mx_EventTile_line {
+            padding: 3px 0 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon
+        }
     }
 
     &.mx_EventTile_continuation {
@@ -825,6 +839,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
 }
 
 .mx_ThreadView {
+    --ThreadView_group_spacing-start: 56px; // 56px: 64px - 8px (padding)
+
     display: flex;
     flex-direction: column;
     max-height: 100%;
@@ -893,7 +909,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 
     .mx_EventTile[data-layout=group] {
-        $spacing-start: 56px; // 56px: 64px - 8px (padding)
         width: 100%;
 
         .mx_EventTile_content,
@@ -904,7 +919,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         .mx_MLocationBody,
         .mx_ReplyChain_wrapper,
         .mx_ReactionsRow {
-            margin-left: $spacing-start;
+            margin-inline-start: var(--ThreadView_group_spacing-start);
             margin-right: 8px;
 
             .mx_EventTile_content,
@@ -947,7 +962,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         }
 
         .mx_EventTile_mediaLine {
-            padding-inline-start: $spacing-start;
+            padding-inline-start: var(--ThreadView_group_spacing-start);
         }
     }
 

src/components/views/rooms/EventTile.tsx

@@ -1032,6 +1032,11 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         if (this.context.timelineRenderingType === TimelineRenderingType.Notification) {
             avatarSize = 24;
             needsSenderProfile = true;
+        } else if (isInfoMessage) {
+            // a small avatar, with no sender profile, for
+            // joins/parts/etc
+            avatarSize = 14;
+            needsSenderProfile = false;
         } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList ||
             (this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation)
         ) {
@@ -1040,11 +1045,6 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
         } else if (eventType === EventType.RoomCreate || isBubbleMessage) {
             avatarSize = 0;
             needsSenderProfile = false;
-        } else if (isInfoMessage) {
-            // a small avatar, with no sender profile, for
-            // joins/parts/etc
-            avatarSize = 14;
-            needsSenderProfile = false;
         } else if (this.props.layout == Layout.IRC) {
             avatarSize = 14;
             needsSenderProfile = true;