Improve _GenericEventListSummary.scss (#9005)

* Include mx_BaseAvatar

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

* Include style blocks of mx_MatrixChat_useCompactLayout

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>

* Set top padding to avatars on group layout only

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

* Remove a redundant declaration for bubble layout

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

* Set the same margin value to mx_GenericEventListSummary_avatars on every layout

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

* Remove margin-top from mx_GenericEventListSummary_toggle on IRC layout

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

* Remove block margin from mx_GenericEventListSummary_toggle on both IRC layout and modern layout

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

* Set spacing to mx_GenericEventListSummary instead of its child elements

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

* Apply the margin to every layout

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

* Move general rules up

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

* Apply block margin to mx_GenericEventListSummary_toggle of every layout

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

* Apply top margin to modern layout

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

* Include mx_MatrixChat_useCompactLayout

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

* Set top margin to mx_GenericEventListSummary insted of toggle

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

* Use a spacing variable

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

* Remove a redundant declaration

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

* Add a comment

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

* Apply display flex as a default value

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

res/css/views/elements/_GenericEventListSummary.scss

@@ -17,31 +17,45 @@ limitations under the License.
 .mx_GenericEventListSummary {
     position: relative;
 
+    .mx_GenericEventListSummary_avatars {
+        margin-right: $spacing-8;
+    }
+
     &[data-layout=irc],
     &[data-layout=group] {
         .mx_GenericEventListSummary_toggle {
             float: right;
-            margin: 8px 10px 0 0;
+            margin-inline: 0 10px;
-        }
-
-        .mx_GenericEventListSummary_avatars {
-            padding-top: $spacing-8;
         }
     }
 
-    &[data-layout=irc] {
+    &[data-layout=group] {
-        .mx_GenericEventListSummary_avatars {
+        margin-top: $spacing-8;
-            padding: 0;
-            margin: 0 9px 0 0;
-        }
     }
 
     &[data-layout=bubble] {
         --maxWidth: 70%;
+        display: flex;
         margin-left: calc(var(--avatarSize) + var(--gutterSize));
 
+        .mx_GenericEventListSummary_toggle {
+            margin-block: 0;
+
+            &[aria-expanded=false] {
+                order: 9; // TODO: Remove
+            }
+
+            &[aria-expanded=true] {
+                margin-inline-start: auto; // reduce clickable area
+                margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
+            }
+        }
+
+        .mx_GenericEventListSummary_line {
+            display: none;
+        }
+
         &[data-expanded=false] {
-            display: flex;
             align-items: center;
             justify-content: space-between;
             column-gap: 5px;
@@ -50,7 +64,6 @@ limitations under the License.
         // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
         // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
         &[data-expanded=true] {
-            display: flex;
             flex-direction: column;
             margin: 0;
         }
@@ -65,26 +78,22 @@ limitations under the License.
                 background: transparent;
             }
         }
+    }
 
-        .mx_GenericEventListSummary_toggle {
+    .mx_MatrixChat_useCompactLayout & {
-            margin-block: 0;
+        font-size: $font-13px;
+        margin-top: $spacing-4;
 
-            &[aria-expanded=false] {
+        .mx_EventTile_line {
-                order: 9;
+            line-height: $font-20px;
-            }
-
-            &[aria-expanded=true] {
-                margin-inline-start: auto; // reduce clickable area
-                margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
-            }
         }
 
         .mx_GenericEventListSummary_line {
-            display: none;
+            line-height: $font-22px;
         }
 
-        .mx_GenericEventListSummary_avatars {
+        .mx_TextualEvent.mx_GenericEventListSummary_summary {
-            padding-top: 0;
+            font-size: $font-13px;
         }
     }
 }
@@ -101,13 +110,12 @@ limitations under the License.
 
 .mx_GenericEventListSummary_avatars {
     display: inline-block;
-    margin-right: 8px;
     line-height: $font-12px;
-}
 
-.mx_GenericEventListSummary_avatars .mx_BaseAvatar {
+    .mx_BaseAvatar {
-    margin-right: -4px;
+        margin-right: -4px;
-    cursor: pointer;
+        cursor: pointer;
+    }
 }
 
 .mx_GenericEventListSummary_line {
@@ -115,24 +123,3 @@ limitations under the License.
     margin-left: 63px;
     line-height: $font-30px;
 }
-
-.mx_MatrixChat_useCompactLayout {
-    .mx_GenericEventListSummary {
-        font-size: $font-13px;
-        .mx_EventTile_line {
-            line-height: $font-20px;
-        }
-    }
-
-    .mx_GenericEventListSummary_line {
-        line-height: $font-22px;
-    }
-
-    .mx_GenericEventListSummary_toggle {
-        margin-top: 3px;
-    }
-
-    .mx_TextualEvent.mx_GenericEventListSummary_summary {
-        font-size: $font-13px;
-    }
-}