Stop using mx_GroupLayout for styling (#8711)

Author: luixxiul

res/css/views/right_panel/_ThreadPanel.scss

@@ -116,29 +116,11 @@ limitations under the License.
         height: 100%;
     }
 
-    // Override _GroupLayout.scss for the thread panel
-    .mx_GroupLayout {
-        .mx_EventTile {
-            .mx_MessageActionBar {
-                right: 0;
-                top: -36px; // 2px above EventTile
-                z-index: 10; // See _EventTile.scss
-            }
-
-            &[data-shape=ThreadsList] {
-                > .mx_DisambiguatedProfile {
-                    margin-inline-start: 0;
-                }
-
-                .mx_MessageTimestamp {
-                    position: initial;
-                    width: auto;
-                }
-
-                .mx_EventTile_line {
-                    padding-bottom: 0; // Override mx_EventTile_line on _GroupLayout.scss
-                }
-            }
+    .mx_EventTile[data-layout=group] {
+        .mx_MessageActionBar {
+            right: 0;
+            top: -36px; // 2px above EventTile
+            z-index: 10; // See _EventTile.scss
         }
     }
 

res/css/views/rooms/_EventTile.scss

@@ -66,8 +66,25 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 
     &[data-layout=group] {
-        .mx_EventTile_line {
-            line-height: var(--GroupLayout-EventTile-line-height);
+        > .mx_DisambiguatedProfile {
+            line-height: $font-20px;
+            margin-left: $left-gutter;
+        }
+
+        > .mx_EventTile_avatar {
+            position: absolute;
+            z-index: 9;
+        }
+
+        .mx_MessageTimestamp {
+            position: absolute; // for modern layout
+        }
+
+        .mx_EventTile_line,
+        .mx_EventTile_reply {
+            padding-top: 1px;
+            padding-bottom: 3px;
+            line-height: $font-22px;
         }
     }
 }
@@ -128,7 +145,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         display: inline-block;
         padding-bottom: 0px;
         padding-top: 0px;
-        margin: 0px;
         max-width: calc(100% - $left-gutter);
     }
 
@@ -789,7 +805,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     }
 
     .mx_DisambiguatedProfile {
-        margin-right: $spacing-12;
+        margin-inline: 0 $spacing-12;
         display: inline-flex;
         flex: 1;
 
@@ -813,6 +829,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     .mx_EventTile_line {
         width: 100%;
         box-sizing: border-box;
+        padding-bottom: 0;
 
         .mx_ThreadPanel_replies {
             margin-top: $spacing-8;
@@ -835,6 +852,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
     .mx_MessageTimestamp {
         max-width: 80px;
         width: auto;
+        position: initial;
     }
 }
 

res/css/views/rooms/_GroupLayout.scss

@@ -15,38 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$left-gutter: 64px;
-
-.mx_GroupLayout {
-    --GroupLayout-EventTile-line-height: $font-22px;
-
-    .mx_EventTile {
-        > .mx_DisambiguatedProfile {
-            line-height: $font-20px;
-            margin-left: $left-gutter;
-        }
-
-        > .mx_EventTile_avatar {
-            position: absolute;
-            z-index: 9;
-        }
-
-        .mx_MessageTimestamp {
-            position: absolute; // for modern layout
-        }
-
-        .mx_EventTile_line,
-        .mx_EventTile_reply {
-            padding-top: 1px;
-            padding-bottom: 3px;
-        }
-
-        .mx_EventTile_reply {
-            line-height: var(--GroupLayout-EventTile-line-height);
-        }
-    }
-}
-
 /* Compact layout overrides */
 
 .mx_MatrixChat_useCompactLayout {

res/css/views/rooms/_IRCLayout.scss

@@ -173,6 +173,7 @@ $irc-line-height: $font-18px;
 
     .mx_DisambiguatedProfile {
         width: var(--name-width);
+        margin-inline-end: 0; // override mx_EventTile > *
         display: flex;
         order: 2;
         flex-shrink: 0;