From 98168722b6f59a71269c9e678cc56b39cd352b5f 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:36:29 +0200
Subject: [PATCH] Fix notifications pattern width behavior and text-segment
 height

---
 patterns/notifications.html          |  6 +++---
 styles/28-patterns-notifications.css | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/patterns/notifications.html b/patterns/notifications.html
index 431cb84..151005a 100644
--- a/patterns/notifications.html
+++ b/patterns/notifications.html
@@ -16,7 +16,7 @@
     <div class="sg-preview-area sg-notifications-pattern">
 
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
           <p class="sg-body">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
           </p>
@@ -30,7 +30,7 @@
       </article>
 
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
           <p class="sg-body">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
           </p>
@@ -44,7 +44,7 @@
       </article>
 
       <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
           <p class="sg-body">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
           </p>
diff --git a/styles/28-patterns-notifications.css b/styles/28-patterns-notifications.css
index 325543d..30ee1e5 100644
--- a/styles/28-patterns-notifications.css
+++ b/styles/28-patterns-notifications.css
@@ -2,16 +2,33 @@
 /* Patterns: Notifications                                   */
 /* ========================================================= */
 
+.sg-notifications-pattern {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-small);
+  align-items: flex-start;
+  width: 100%;
+}
+
 .sg-notifications-pattern__card {
+  flex: 1 1 var(--layout-object-card-min-width);
   min-width: var(--layout-object-card-min-width);
   max-width: var(--layout-object-card-max-width);
+}
+
+.sg-notifications-pattern__text-segment {
   height: 200px;
 }
 
 @media (max-width: 767px) {
   .sg-notifications-pattern__card {
+    width: 100%;
     min-width: 0;
     max-width: none;
+    flex: 1 1 auto;
+  }
+
+  .sg-notifications-pattern__text-segment {
     height: auto;
   }
 }