Move mx_EventTile_msgOption out of mx_EventTile:not([data-layout=bubble]) (#8973)

* Move mx_EventTile_msgOption out of mx_EventTile:not([data-layout=bubble])

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

* Decrease specificity on _IRCLayout.scss

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

Author: luixxiul

res/css/views/rooms/_EventTile.scss

@@ -169,6 +169,22 @@ $left-gutter: 64px;
             margin-right: 10px;
         }
 
+        .mx_EventTile_msgOption {
+            float: right;
+            text-align: right;
+            position: relative;
+            width: 90px;
+
+            /* Hack to stop the height of this pushing the messages apart.
+               Replaces margin-top: -6px. This interacts better with a read
+               marker being in between. Content overflows. */
+            height: 1px;
+
+            a {
+                text-decoration: none;
+            }
+        }
+
         &.mx_EventTile_highlight,
         &.mx_EventTile_highlight .markdown-body {
             .mx_EventTile_line {
@@ -305,22 +321,6 @@ $left-gutter: 64px;
         }
     }
 
-    .mx_EventTile_msgOption {
-        float: right;
-        text-align: right;
-        position: relative;
-        width: 90px;
-
-        /* Hack to stop the height of this pushing the messages apart.
-           Replaces margin-top: -6px. This interacts better with a read
-           marker being in between. Content overflows. */
-        height: 1px;
-
-        a {
-            text-decoration: none;
-        }
-    }
-
     &:hover.mx_EventTile_verified .mx_EventTile_line {
         box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-verified-color;
     }

res/css/views/rooms/_IRCLayout.scss

@@ -39,7 +39,7 @@ $irc-line-height: $font-18px;
             margin-right: $right-padding;
         }
 
-        > .mx_EventTile_msgOption {
+        .mx_EventTile_msgOption {
             order: 5;
             flex-shrink: 0;