Organize rules of GenericEventListSummary on bubble layout (#8599)

* Organize - data-expanded=false

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

* Organize - data-expanded=true

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

* Organize - EventTile

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

* Dedupe mx_GenericEventListSummary[data-layout=bubble]

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

* yarn run lint:style --fix

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

Author: luixxiul

res/css/views/rooms/_EventBubbleTile.scss

@@ -606,44 +606,44 @@ limitations under the License.
         content: "";
         clear: both;
     }
-}
 
-.mx_GenericEventListSummary[data-expanded=false][data-layout=bubble] {
-    // Align with left edge of bubble tiles
-    padding: 0 49px;
-}
+    &[data-expanded=false] {
+        // Align with left edge of bubble tiles
+        padding: 0 49px;
 
-// 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.
-.mx_GenericEventListSummary[data-expanded=true][data-layout=bubble] {
-    display: flex;
-    flex-direction: column;
-    margin: 0;
+        // increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
+        + .mx_EventTile[data-layout=bubble][data-self=true] {
+            margin-top: 20px;
+        }
+    }
 
-    .mx_EventTile_info {
-        padding: 2px 0;
-        margin-right: 0;
+    // 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;
 
-        .mx_MessageActionBar {
-            inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
-            right: 48px; // align with that of right-column bubbles
-        }
+        .mx_EventTile_info {
+            padding: 2px 0;
+            margin-right: 0;
 
-        .mx_ReadReceiptGroup {
-            right: -18px; // match alignment to RRs of chat bubbles
-        }
+            .mx_MessageActionBar {
+                inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
+                right: 48px; // align with that of right-column bubbles
+            }
 
-        &::before {
-            right: 0; // match alignment of the hover background to that of chat bubbles
+            .mx_ReadReceiptGroup {
+                right: -18px; // match alignment to RRs of chat bubbles
+            }
+
+            &::before {
+                right: 0; // match alignment of the hover background to that of chat bubbles
+            }
         }
     }
 }
 
-// increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
-.mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
-    margin-top: 20px;
-}
-
 /* events that do not require bubble layout */
 .mx_GenericEventListSummary[data-layout=bubble],
 .mx_EventTile.mx_EventTile_bad[data-layout=bubble] {