Tidy up IRCLayout.pcss (#10189)

* Specify the data-layout=irc against ':not([data-layout=bubble])'

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

* Include mx_EventTile_info in mx_EventTile[data-layout=irc]

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

* Move declarations up, removing a default declaration

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

* Tidy up mx_EventTile:hover

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

* Use a spacing variable

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

* Sort by order properties

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

* Move and add comments

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

* Merge style declarations - flex-shrink and height

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

* Consider cascading order

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

* Move order declaration top

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

* Fix an invalid comment

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

---------

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

res/css/views/rooms/_IRCLayout.pcss

@@ -17,57 +17,54 @@ limitations under the License.
 $irc-line-height: $font-18px;
 
 .mx_IRCLayout {
-    --name-width: 80px; // cf. ircDisplayNameWidth on Settings.tsx
+    --name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */
     --icon-width: 14px;
-    --right-padding: 5px;
     --line-height: $irc-line-height;
+    --right-padding: 5px; /* TODO: Use a spacing variable */
 
     line-height: var(--line-height) !important;
 
+    blockquote {
+        margin: 0;
+    }
+
     .mx_NewRoomIntro {
         > h2 {
             line-height: initial; /* Cancel $irc-line-height */
         }
     }
 
-    .mx_EventTile {
+    .mx_EventTile[data-layout="irc"] {
         --EventTile_irc_line-padding-block: 1px;
 
-        /* timestamps are links which shouldn't be underlined */
-        > a {
-            text-decoration: none;
-            min-width: $MessageTimestamp_width;
-        }
-
         display: flex;
-        flex-direction: row;
         align-items: flex-start;
         padding-top: 0;
 
+        > a {
+            text-decoration: none; /* timestamps are links which shouldn't be underlined */
+            min-width: $MessageTimestamp_width; /* ensure space for EventTile without timestamp */
+        }
+
         > * {
             margin-right: var(--right-padding);
         }
 
-        .mx_EventTile_msgOption {
-            order: 5;
-            flex-shrink: 0;
+        .mx_EventTile_avatar,
+        .mx_EventTile_e2eIcon {
+            height: $irc-line-height;
         }
 
-        .mx_EventTile_line,
-        .mx_EventTile_reply {
-            display: flex;
-            flex-direction: column;
-            order: 3;
-            flex-grow: 1;
-            flex-shrink: 1;
-            min-width: 0;
+        .mx_EventTile_avatar,
+        .mx_DisambiguatedProfile,
+        .mx_EventTile_e2eIcon,
+        .mx_EventTile_msgOption {
+            flex-shrink: 0;
         }
 
         .mx_EventTile_avatar {
             order: 1;
             position: relative;
-            flex-shrink: 0;
-            height: $irc-line-height;
             display: flex;
             align-items: center;
 
@@ -82,10 +79,9 @@ $irc-line-height: $font-18px;
         }
 
         .mx_DisambiguatedProfile {
+            order: 2;
             width: var(--name-width);
             margin-inline-end: 0; /* override mx_EventTile > * */
-            order: 2;
-            flex-shrink: 0;
 
             > .mx_DisambiguatedProfile_displayName {
                 width: 100%;
@@ -96,9 +92,8 @@ $irc-line-height: $font-18px;
 
             > .mx_DisambiguatedProfile_mxid {
                 visibility: collapse;
-                /* Override the inherited margin. */
-                margin-left: 0;
-                padding: 0 5px;
+                margin-left: 0; /* Override the inherited margin. */
+                padding: 0 5px; /* TODO: Use a spacing variable */
             }
 
             &:hover {
@@ -110,7 +105,7 @@ $irc-line-height: $font-18px;
                     display: inline;
                     background-color: $event-selected-color;
                     border-radius: 8px 0 0 8px;
-                    padding-right: 8px;
+                    padding-right: $spacing-8;
                 }
 
                 > .mx_DisambiguatedProfile_mxid {
@@ -123,12 +118,7 @@ $irc-line-height: $font-18px;
 
         .mx_EventTile_e2eIcon {
             padding: 0;
-
-            flex-shrink: 0;
             flex-grow: 0;
-
-            height: $font-18px;
-
             background-position: center;
         }
 
@@ -155,13 +145,34 @@ $irc-line-height: $font-18px;
             }
         }
 
+        .mx_EventTile_line,
+        .mx_EventTile_reply {
+            order: 3;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            flex-shrink: 1;
+            min-width: 0;
+        }
+
         .mx_EventTile_reply {
             order: 4;
         }
 
+        .mx_EventTile_msgOption {
+            order: 5;
+        }
+
         .mx_EditMessageComposer_buttons {
             position: relative;
         }
+
+        &.mx_EventTile_info {
+            .mx_ViewSourceEvent, /* For hidden events */
+            .mx_TextualEvent {
+                line-height: $irc-line-height;
+            }
+        }
     }
 
     .mx_EventTile_emote {
@@ -171,17 +182,6 @@ $irc-line-height: $font-18px;
         }
     }
 
-    blockquote {
-        margin: 0;
-    }
-
-    .mx_EventTile.mx_EventTile_info {
-        .mx_ViewSourceEvent, /* For hidden events */
-        .mx_TextualEvent {
-            line-height: $irc-line-height;
-        }
-    }
-
     .mx_ReplyChain {
         .mx_DisambiguatedProfile {
             width: unset;