diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index be953a750f..a83c88a7ae 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -19,110 +19,93 @@ limitations under the License.
     flex: 1 1 0;
     overflow-y: auto;
     display: flex;
-}
 
-.mx_NotificationPanel .mx_RoomView_messageListWrapper {
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
-.mx_NotificationPanel .mx_RoomView_MessageList {
-    width: 100%;
-}
-
-.mx_NotificationPanel .mx_RoomView_MessageList h2 {
-    margin-left: 0px;
-}
-
-/* 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 {
-    word-break: break-word;
-    position: relative;
-    padding-bottom: 18px;
-
-    &:not(.mx_EventTile_last):not(.mx_EventTile_lastInSection)::after {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background-color: $tertiary-content;
-        height: 1px;
-        opacity: 0.4;
-        content: '';
-    }
-}
-
-.mx_NotificationPanel .mx_EventTile_roomName {
-    font-weight: bold;
-    font-size: $font-14px;
-
-    > * {
-        vertical-align: middle;
+    .mx_RoomView_messageListWrapper {
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
     }
 
-    > .mx_BaseAvatar {
-        margin-right: 8px;
+    .mx_RoomView_MessageList {
+        width: 100%;
+
+        h2 {
+            margin-left: 0;
+        }
     }
-}
 
-.mx_NotificationPanel .mx_EventTile_roomName a {
-    color: $primary-content;
-}
+    /* 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_avatar {
-    display: none; // we don't need this in this view
-}
+    .mx_EventTile_avatar {
+        display: none;
+    }
 
-.mx_NotificationPanel .mx_EventTile .mx_DisambiguatedProfile,
-.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    color: $primary-content;
-    font-size: $font-12px;
-    display: inline;
-}
+    .mx_EventTile {
+        word-break: break-word;
+        position: relative;
+        padding-block: 18px;
 
-.mx_NotificationPanel .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_senderDetails {
-    padding-left: 36px; // align with the room name
-    position: relative;
+        .mx_EventTile_senderDetails,
+        .mx_EventTile_line {
+            padding-left: 36px; // align with the room name
+        }
 
-    a {
+        .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;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: $tertiary-content;
+            height: 1px;
+            opacity: 0.4;
+            content: '';
+        }
+    }
+
+    .mx_EventTile_roomName {
         display: flex;
+        align-items: center;
+        column-gap: $spacing-8;
+        font-weight: bold;
+        font-size: $font-14px;
+
+        a {
+            color: $primary-content;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
-}
 
-.mx_NotificationPanel .mx_EventTile_roomName a,
-.mx_NotificationPanel .mx_EventTile_senderDetails a {
-    text-decoration: none !important;
-}
+    .mx_EventTile_selected .mx_EventTile_line {
+        padding-left: 0;
+    }
 
-.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    visibility: visible;
-    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_EventTile_content {
+        margin-right: 0;
+    }
 }
 
 .mx_NotificationPanel_empty::before {