fix(core/content-header): adapt spacing (#1514)

Co-authored-by: AndreasBerliner <[email protected]>

.changeset/eighty-clocks-bake.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/content-header): adapt spacing

packages/core/src/components/content-header/content-header.scss

@@ -11,16 +11,20 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  padding: 0px;
+  padding: 0;
 
   .titleGroup {
     display: flex;
     flex-direction: column;
-    flex: 1 1 0%;
+    flex: 1 1 0;
+
+    .secondary {
+      padding: 0.25rem 0;
+    }
   }
 
   .subtitle {
-    margin-top: 0.5rem;
+    margin-top: -0.125rem;
   }
 
   .backButton {

packages/core/src/components/content-header/content-header.tsx

@@ -56,14 +56,21 @@ export class ContentHeader {
         ) : null}
 
         <div class="titleGroup">
-          <ix-typography format={this.variant === 'secondary' ? 'h4' : 'h3'}>
+          <ix-typography
+            format={this.variant === 'secondary' ? 'h4' : 'h3'}
+            class={this.variant === 'secondary' ? 'secondary' : ''}
+          >
             {this.headerTitle}
           </ix-typography>
-          {this.headerSubtitle !== undefined ? (
-            <ix-typography format={'h6'} color={'soft'} class="subtitle">
+          {!!this.headerSubtitle && (
+            <ix-typography
+              format={'h6'}
+              color={'soft'}
+              class={this.variant === 'secondary' ? 'subtitle' : ''}
+            >
               {this.headerSubtitle}
             </ix-typography>
-          ) : null}
+          )}
         </div>
         <div class="buttons">
           <slot />