From 7624ace59f244b6f2cec0d3e8dbe486c839214e9 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:31:10 +0200
Subject: [PATCH] Set notifications pattern desktop size to company card bounds

---
 patterns/notifications.html          |  8 ++++----
 styleguide.css                       |  1 +
 styles/28-patterns-notifications.css | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 styles/28-patterns-notifications.css

diff --git a/patterns/notifications.html b/patterns/notifications.html
index b930d61..431cb84 100644
--- a/patterns/notifications.html
+++ b/patterns/notifications.html
@@ -13,9 +13,9 @@
   <section id="pattern-notifications">
     <p class="sg-preview-label">Pattern: Notifications</p>
 
-    <div class="sg-preview-area">
+    <div class="sg-preview-area sg-notifications-pattern">
 
-      <article class="sg-card" data-pattern="notification" data-component="notification-card">
+      <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">
           <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.
@@ -29,7 +29,7 @@
         </div>
       </article>
 
-      <article class="sg-card" data-pattern="notification" data-component="notification-card">
+      <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">
           <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.
@@ -43,7 +43,7 @@
         </div>
       </article>
 
-      <article class="sg-card sg-card--notification-white" data-pattern="notification" data-component="notification-card">
+      <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">
           <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.
diff --git a/styleguide.css b/styleguide.css
index 376b0fb..7ee74cb 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -10,6 +10,7 @@
 @import "./styles/25-patterns-form-sections.css";
 @import "./styles/26-patterns-vsf-list-card.css";
 @import "./styles/27-patterns-delete-confirmation.css";
+@import "./styles/28-patterns-notifications.css";
 @import "./styles/30-layouts-card-list-page.css";
 @import "./styles/33-layouts-vsf-list-detailseite.css";
 @import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css";
diff --git a/styles/28-patterns-notifications.css b/styles/28-patterns-notifications.css
new file mode 100644
index 0000000..325543d
--- /dev/null
+++ b/styles/28-patterns-notifications.css
@@ -0,0 +1,17 @@
+/* ========================================================= */
+/* Patterns: Notifications                                   */
+/* ========================================================= */
+
+.sg-notifications-pattern__card {
+  min-width: var(--layout-object-card-min-width);
+  max-width: var(--layout-object-card-max-width);
+  height: 200px;
+}
+
+@media (max-width: 767px) {
+  .sg-notifications-pattern__card {
+    min-width: 0;
+    max-width: none;
+    height: auto;
+  }
+}