feat: add user notification pattern

styles/01-foundations.css

@@ -177,6 +177,7 @@
   --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
   --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --layout-notification-card-width: var(--dimension-notification-card-width);
+  --layout-user-notification-card-width: var(--dimension-user-notification-card-width);
   --dimension-notifications-card-min-width: 445px;
   --layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
   --layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
@@ -290,6 +291,7 @@
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;
   --dimension-notification-card-width: 50%;
+  --dimension-user-notification-card-width: 70%;
   --dimension-input-label-width: 9rem;
   --dimension-input-field-desktop-width: 400px;
   --dimension-input-field-max-width: 600px;

styles/28-patterns-notifications.css

@@ -42,6 +42,15 @@
   height: auto;
 }
 
+.sg-user-notification-pattern {
+  width: var(--layout-user-notification-card-width);
+  margin-inline: auto;
+}
+
+.sg-user-notification-pattern__actions {
+  align-items: flex-end;
+}
+
 .sg-vsf-meldungen-layout {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -91,4 +100,8 @@
   .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
     height: auto;
   }
+
+  .sg-user-notification-pattern {
+    width: 100%;
+  }
 }