From 4f77f08cba4ce4ca2fd8197e841e105b54cc0cd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 1 Jun 2026 16:39:24 +0200
Subject: [PATCH] Enforce equal notification card widths across wrapped rows

---
 patterns/notifications.html          | 34 ++++++++++++++++++++++++++++
 styles/28-patterns-notifications.css |  5 ++++
 2 files changed, 39 insertions(+)

diff --git a/patterns/notifications.html b/patterns/notifications.html
index 151005a..393344b 100644
--- a/patterns/notifications.html
+++ b/patterns/notifications.html
@@ -60,5 +60,39 @@
     </div>
   </section>
 
+  <script>
+    const updateNotificationsPatternRowState = () => {
+      document.querySelectorAll('.sg-notifications-pattern').forEach((grid) => {
+        const cards = Array.from(grid.querySelectorAll('.sg-notifications-pattern__card'));
+        grid.classList.remove('sg-notifications-pattern--multi-row');
+        grid.style.removeProperty('--layout-object-card-shared-width');
+
+        if (cards.length <= 1) {
+          return;
+        }
+
+        const firstTop = cards[0].offsetTop;
+        const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
+
+        if (!hasMultipleRows) {
+          return;
+        }
+
+        const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
+        const referenceCard = firstRowCards[0];
+        if (!referenceCard) {
+          return;
+        }
+
+        const referenceWidth = referenceCard.getBoundingClientRect().width;
+        grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
+        grid.classList.add('sg-notifications-pattern--multi-row');
+      });
+    };
+
+    window.addEventListener('load', updateNotificationsPatternRowState);
+    window.addEventListener('resize', updateNotificationsPatternRowState);
+  </script>
+
 </body>
 </html>
diff --git a/styles/28-patterns-notifications.css b/styles/28-patterns-notifications.css
index 30ee1e5..010e269 100644
--- a/styles/28-patterns-notifications.css
+++ b/styles/28-patterns-notifications.css
@@ -16,6 +16,11 @@
   max-width: var(--layout-object-card-max-width);
 }
 
+.sg-notifications-pattern.sg-notifications-pattern--multi-row .sg-notifications-pattern__card {
+  flex: 0 0 var(--layout-object-card-shared-width);
+  width: var(--layout-object-card-shared-width);
+}
+
 .sg-notifications-pattern__text-segment {
   height: 200px;
 }