From 23a4243fa87fb1858379fb91aa33efda82dd7b78 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Wed, 28 Aug 2024 20:44:38 +0200
Subject: [PATCH] Try to switch grouped notifications to CSS grids

---
 .../components/notification_admin_report.tsx  | 22 ++++-----
 .../notification_group_with_status.tsx        | 46 +++++++++----------
 .../styles/mastodon/components.scss           | 24 +++++-----
 3 files changed, 42 insertions(+), 50 deletions(-)

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<{
         <Icon id='flag' icon={FlagIcon} />
       </div>
 
-      <div className='notification-group__main'>
-        <div className='notification-group__main__header'>
-          <div className='notification-group__main__header__label'>
-            {message}
-            <RelativeTimestamp timestamp={report.created_at} />
-          </div>
-        </div>
-
-        {report.comment.length > 0 && (
-          <div className='notification-group__embedded-status__content'>
-            “{report.comment}”
-          </div>
-        )}
+      <div className='notification-group__main__header__label'>
+        {message}
+        <RelativeTimestamp timestamp={report.created_at} />
       </div>
+
+      {report.comment.length > 0 && (
+        <div className='notification-group__embedded-status__content'>
+          “{report.comment}”
+        </div>
+      )}
     </a>
   );
 };
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<{
           <Icon icon={icon} id={iconId} />
         </div>
 
-        <div className='notification-group__main'>
-          <div className='notification-group__main__header'>
-            <div className='notification-group__main__header__wrapper'>
-              <AvatarGroup accountIds={accountIds} />
+        <div className='notification-group__main__header__wrapper'>
+          <AvatarGroup accountIds={accountIds} />
 
-              {actions && (
-                <div className='notification-group__actions'>{actions}</div>
-              )}
-            </div>
-
-            <div className='notification-group__main__header__label'>
-              {label}
-              {timestamp && <RelativeTimestamp timestamp={timestamp} />}
-            </div>
-          </div>
-
-          {statusId && (
-            <div className='notification-group__main__status'>
-              <EmbeddedStatus statusId={statusId} />
-            </div>
-          )}
-
-          {additionalContent && (
-            <div className='notification-group__main__additional-content'>
-              {additionalContent}
-            </div>
+          {actions && (
+            <div className='notification-group__actions'>{actions}</div>
           )}
         </div>
+
+        <div className='notification-group__main__header__label'>
+          {label}
+          {timestamp && <RelativeTimestamp timestamp={timestamp} />}
+        </div>
+
+        {statusId && (
+          <div className='notification-group__main__status'>
+            <EmbeddedStatus statusId={statusId} />
+          </div>
+        )}
+
+        {additionalContent && (
+          <div className='notification-group__main__additional-content'>
+            {additionalContent}
+          </div>
+        )}
       </div>
     </HotKeys>
   );
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 {