diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_admin_report.tsx b/app/javascript/mastodon/features/notifications_v2/components/notification_admin_report.tsx
index fda5798ae9..06809c5a55 100644
--- a/app/javascript/mastodon/features/notifications_v2/components/notification_admin_report.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/notification_admin_report.tsx
@@ -113,20 +113,16 @@ export const NotificationAdminReport: React.FC<{
-
-
-
- {report.comment.length > 0 && (
-
- “{report.comment}”
-
- )}
+
+ {message}
+
+
+ {report.comment.length > 0 && (
+
+ “{report.comment}”
+
+ )}
);
};
diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx b/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx
index 343a9bc4c1..b5121ac1cc 100644
--- a/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx
@@ -87,34 +87,30 @@ export const NotificationGroupWithStatus: React.FC<{
-
-
-
-
+
+
- {actions && (
-
{actions}
- )}
-
-
-
- {label}
- {timestamp && }
-
-
-
- {statusId && (
-
-
-
- )}
-
- {additionalContent && (
-
- {additionalContent}
-
+ {actions && (
+
{actions}
)}
+
+
+ {label}
+ {timestamp && }
+
+
+ {statusId && (
+
+
+
+ )}
+
+ {additionalContent && (
+
+ {additionalContent}
+
+ )}
);
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 0b0cbbfa84..a467ad0291 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -10466,11 +10466,17 @@ noscript {
}
.notification-group {
- display: flex;
+ display: grid;
align-items: flex-start;
gap: 8px;
padding: 16px 24px;
+ grid-template-columns: 40px 1fr;
+ grid-template-areas:
+ 'icon header-wrapper'
+ '. header-label'
+ '. content';
border-bottom: 1px solid var(--background-border-color);
+ container-type: inline-size;
&__icon {
width: 40px;
@@ -10479,6 +10485,7 @@ noscript {
justify-content: center;
flex: 0 0 auto;
color: $dark-text-color;
+ grid-area: icon;
.icon {
width: 28px;
@@ -10522,13 +10529,6 @@ noscript {
}
&__main {
- display: flex;
- flex-direction: column;
- gap: 8px;
- flex: 1 1 auto;
- overflow: hidden;
- container-type: inline-size;
-
@container (width < 350px) {
&__header time {
display: none;
@@ -10536,13 +10536,10 @@ noscript {
}
&__header {
- display: flex;
- flex-direction: column;
- gap: 8px;
-
&__wrapper {
display: flex;
justify-content: space-between;
+ grid-area: header-wrapper;
}
&__label {
@@ -10551,6 +10548,7 @@ noscript {
font-size: 15px;
line-height: 22px;
color: $darker-text-color;
+ grid-area: header-label;
a {
color: inherit;
@@ -10572,6 +10570,8 @@ noscript {
border: 1px solid var(--background-border-color);
border-radius: 8px;
padding: 8px;
+ grid-area: content;
+ overflow: hidden;
}
&__additional-content {