Unify notifications panel event design

res/css/_components.pcss

@@ -62,7 +62,6 @@
 @import "./structures/_MainSplit.pcss";
 @import "./structures/_MatrixChat.pcss";
 @import "./structures/_NonUrgentToastContainer.pcss";
-@import "./structures/_NotificationPanel.pcss";
 @import "./structures/_QuickSettingsButton.pcss";
 @import "./structures/_RightPanel.pcss";
 @import "./structures/_RoomSearch.pcss";

res/css/views/right_panel/_BaseCard.pcss

@@ -210,7 +210,6 @@ limitations under the License.
 
 .mx_FilePanel,
 .mx_UserInfo,
-.mx_NotificationPanel,
 .mx_MemberList {
     &.mx_BaseCard {
         padding: $spacing-32 0 0;

res/css/views/rooms/_EventTile.pcss

@@ -858,7 +858,8 @@ $left-gutter: 64px;
     }
 }
 
-.mx_EventTile[data-shape="ThreadsList"] {
+.mx_EventTile[data-shape="ThreadsList"],
+.mx_EventTile[data-shape="Notification"] {
     --topOffset: $spacing-12;
     --leftOffset: 48px;
     $borderRadius: 8px;
@@ -938,9 +939,7 @@ $left-gutter: 64px;
     }
 
     .mx_DisambiguatedProfile {
-        margin-inline: 0 $spacing-12;
         display: inline-flex;
-        flex: 1;
 
         .mx_DisambiguatedProfile_displayName,
         .mx_DisambiguatedProfile_mxid {
@@ -963,6 +962,7 @@ $left-gutter: 64px;
         width: 100%;
         box-sizing: border-box;
         padding-bottom: 0;
+        padding-inline-start: var(--leftOffset);
 
         .mx_ThreadPanel_replies {
             margin-top: $spacing-8;
@@ -988,11 +988,6 @@ $left-gutter: 64px;
         }
     }
 
-    .mx_DisambiguatedProfile,
-    .mx_EventTile_line {
-        padding-inline-start: var(--leftOffset);
-    }
-
     .mx_MessageTimestamp {
         font-size: $font-12px;
         max-width: var(--MessageTimestamp-max-width);
@@ -1322,6 +1317,21 @@ $left-gutter: 64px;
     }
 }
 
+.mx_EventTile_details {
+    display: flex;
+    width: -webkit-fill-available;
+    align-items: center;
+    justify-content: space-between;
+    gap: $spacing-8;
+    margin-left: var(--leftOffset);
+    .mx_EventTile_truncated {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
 /* Media query for mobile UI */
 @media only screen and (max-width: 480px) {
     .mx_EventTile_content {

src/components/structures/NotificationPanel.tsx

@@ -25,6 +25,7 @@ import Spinner from "../views/elements/Spinner";
 import { Layout } from "../../settings/enums/Layout";
 import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import Measured from "../views/elements/Measured";
+import Heading from "../views/typography/Heading";
 
 interface IProps {
     onClose(): void;
@@ -90,8 +91,21 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
                     narrow: this.state.narrow,
                 }}
             >
-                <BaseCard className="mx_NotificationPanel" onClose={this.props.onClose} withoutScrollContainer>
-                    <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />
+                <BaseCard
+                    header={
+                        <Heading size="h4" className="mx_BaseCard_header_title_heading">
+                            {_t("Notifications")}
+                        </Heading>
+                    }
+                    /**
+                     * Need to rename this CSS class to something more generic
+                     * Will be done once all the panels are using a similar layout
+                     */
+                    className="mx_ThreadPanel"
+                    onClose={this.props.onClose}
+                    withoutScrollContainer={true}
+                >
+                    {this.card.current && <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />}
                     {content}
                 </BaseCard>
             </RoomContext.Provider>