From 7f01e0029f58ff7dde47e1c6458ffaeb5cb9fb11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 2 Jun 2026 19:20:19 +0200
Subject: [PATCH] Fix notification title segment height

---
 patterns/notifications.html          | 8 ++++----
 styles/28-patterns-notifications.css | 5 +++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/patterns/notifications.html b/patterns/notifications.html
index 537de08..6346708 100644
--- a/patterns/notifications.html
+++ b/patterns/notifications.html
@@ -80,7 +80,7 @@
     <div class="sg-preview-area sg-notifications-pattern">
 
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
             Titel
           </p>
@@ -100,7 +100,7 @@
       </article>
 
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
             Titel
           </p>
@@ -120,7 +120,7 @@
       </article>
 
       <article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
             Titel
           </p>
@@ -140,7 +140,7 @@
       </article>
 
       <article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
-        <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
+        <div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
           <p class="sg-body">
             Titel
           </p>
diff --git a/styles/28-patterns-notifications.css b/styles/28-patterns-notifications.css
index c38b7e4..39e43df 100644
--- a/styles/28-patterns-notifications.css
+++ b/styles/28-patterns-notifications.css
@@ -33,6 +33,10 @@
   height: var(--layout-notifications-text-segment-fixed-height);
 }
 
+.sg-notifications-pattern__card > .sg-notifications-pattern__title-segment {
+  height: var(--layout-notifications-text-segment-fixed-height);
+}
+
 .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
   height: var(--layout-notifications-text-segment-fixed-height-small);
 }
@@ -46,6 +50,7 @@
   }
 
   .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment,
+  .sg-notifications-pattern__card > .sg-notifications-pattern__title-segment,
   .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
     height: auto;
   }