Improve _NotificationPanel.scss (#9036)

* Include in mx_NotificationPanel

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>

* Include in mx_RoomView_MessageList

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

* Include in mx_EventTile_roomName

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

* Include in mx_EventTile

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

* Same order as _FilePanel.scss

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

* Remove redundant and obsolete declarations

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

* Shorthand for padding

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

* Remove a obsolete declaration

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

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

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

* Merge style declarations

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

* Apply the block start margin

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

* Improve style rules

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

* Align elements with flexbox, specifying how to handle overflow room name

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

* Use column-gap instead

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

* Add indent to the comment

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

res/css/structures/_NotificationPanel.scss

@@ -19,30 +19,58 @@ limitations under the License.
     flex: 1 1 0;
     overflow-y: auto;
     display: flex;
-}
 
-.mx_NotificationPanel .mx_RoomView_messageListWrapper {
+    .mx_RoomView_messageListWrapper {
         flex-direction: row;
         align-items: center;
         justify-content: center;
-}
+    }
 
-.mx_NotificationPanel .mx_RoomView_MessageList {
+    .mx_RoomView_MessageList {
         width: 100%;
-}
 
-.mx_NotificationPanel .mx_RoomView_MessageList h2 {
+        h2 {
-    margin-left: 0px;
+            margin-left: 0;
-}
+        }
+    }
 
-/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+    /* FIXME: rather than having EventTile's default CSS be for MessagePanel,
        we should make EventTile a base CSS class and customise it specifically
        for usage in {Message,File,Notification}Panel. */
 
-.mx_NotificationPanel .mx_EventTile {
+    .mx_EventTile_avatar {
+        display: none;
+    }
+
+    .mx_EventTile {
         word-break: break-word;
         position: relative;
-    padding-bottom: 18px;
+        padding-block: 18px;
+
+        .mx_EventTile_senderDetails,
+        .mx_EventTile_line {
+            padding-left: 36px; // align with the room name
+        }
+
+        .mx_EventTile_senderDetails {
+            position: relative;
+
+            a {
+                display: flex;
+                column-gap: 5px; // TODO: Use a spacing variable
+            }
+        }
+
+        .mx_DisambiguatedProfile,
+        .mx_MessageTimestamp {
+            color: $primary-content;
+            font-size: $font-12px;
+            display: inline;
+        }
+
+        &:hover .mx_EventTile_line {
+            background-color: $background;
+        }
 
         &:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection)::after {
             position: absolute;
@@ -54,75 +82,30 @@ limitations under the License.
             opacity: 0.4;
             content: '';
         }
-}
+    }
 
-.mx_NotificationPanel .mx_EventTile_roomName {
+    .mx_EventTile_roomName {
+        display: flex;
+        align-items: center;
+        column-gap: $spacing-8;
         font-weight: bold;
         font-size: $font-14px;
 
-    > * {
-        vertical-align: middle;
-    }
-
-    > .mx_BaseAvatar {
-        margin-right: 8px;
-    }
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName a {
-    color: $primary-content;
-}
-
-.mx_NotificationPanel .mx_EventTile_avatar {
-    display: none; // we don't need this in this view
-}
-
-.mx_NotificationPanel .mx_EventTile .mx_DisambiguatedProfile,
-.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    color: $primary-content;
-    font-size: $font-12px;
-    display: inline;
-}
-
-.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_senderDetails {
-    padding-left: 36px; // align with the room name
-    position: relative;
-
         a {
-        display: flex;
+            color: $primary-content;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
-}
 
-.mx_NotificationPanel .mx_EventTile_roomName a,
+    .mx_EventTile_selected .mx_EventTile_line {
-.mx_NotificationPanel .mx_EventTile_senderDetails a {
+        padding-left: 0;
-    text-decoration: none !important;
+    }
-}
 
-.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    .mx_EventTile_content {
-    visibility: visible;
+        margin-right: 0;
-    position: initial;
+    }
-    display: inline;
-    padding-left: 5px;
-}
-
-.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_line {
-    margin-right: 0px;
-    padding-left: 36px; // align with the room name
-    padding-top: 0px;
-    padding-bottom: 0px;
-    padding-right: 0px;
-}
-
-.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
-    padding-left: 0px;
-}
-
-.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $background;
-}
-
-.mx_NotificationPanel .mx_EventTile_content {
-    margin-right: 0px;
 }
 
 .mx_NotificationPanel_empty::before {