diff --git a/src/app/frontend/common/animations/animations.ts b/src/app/frontend/common/animations/animations.ts
index 6438a2f6ee74..f675383a6004 100644
--- a/src/app/frontend/common/animations/animations.ts
+++ b/src/app/frontend/common/animations/animations.ts
@@ -18,36 +18,30 @@ const DEFAULT_TRANSITION_TIME = '500ms ease-in-out';
 
 export class Animations {
   static easeOut = trigger('easeOut', [
-    transition('* => void', [
+    transition(`${AUTO_STYLE} => void`, [
       style({opacity: 1}),
       animate(DEFAULT_TRANSITION_TIME, style({opacity: 0})),
     ]),
   ]);
 
   static easeInOut = trigger('easeInOut', [
-    transition('void => *', [
+    transition(`void => ${AUTO_STYLE}`, [
       style({opacity: 0}),
       animate(DEFAULT_TRANSITION_TIME, style({opacity: 1})),
     ]),
-    transition('* => void', [animate(DEFAULT_TRANSITION_TIME, style({opacity: 0}))]),
+    transition(`${AUTO_STYLE} => void`, [animate(DEFAULT_TRANSITION_TIME, style({opacity: 0}))]),
   ]);
 
   static expandInOut = trigger('expandInOut', [
-    state('true', style({height: '0', display: 'none'})),
-    state(
-      'false',
-      style({
-        height: AUTO_STYLE,
-        display: AUTO_STYLE,
-      }),
-    ),
+    state('true', style({height: '0', opacity: '0'})),
+    state('false', style({height: AUTO_STYLE, opacity: '1'})),
     transition('false => true', [
       style({overflow: 'hidden'}),
       animate('500ms ease-in', style({height: '0'})),
     ]),
     transition('true => false', [
-      style({overflow: 'hidden'}),
-      animate('500ms ease-out', style({height: AUTO_STYLE})),
+      style({overflow: 'hidden', opacity: '1'}),
+      animate('500ms ease-out', style({height: AUTO_STYLE, display: AUTO_STYLE})),
     ]),
   ]);
 }
diff --git a/src/app/frontend/common/components/card/component.ts b/src/app/frontend/common/components/card/component.ts
index ab9d52c54a34..7cd29f98add9 100644
--- a/src/app/frontend/common/components/card/component.ts
+++ b/src/app/frontend/common/components/card/component.ts
@@ -42,6 +42,12 @@ export class CardComponent {
     }
   }
 
+  onCardHeaderClick(): void {
+    if (this.expandable && !this.expanded) {
+      this.expanded = true;
+    }
+  }
+
   getTitleClasses(): {[clsName: string]: boolean} {
     const ngCls = {} as {[clsName: string]: boolean};
     if (!this.expanded) {
diff --git a/src/app/frontend/common/components/card/style.scss b/src/app/frontend/common/components/card/style.scss
index 53e7be654538..90e321e849f3 100644
--- a/src/app/frontend/common/components/card/style.scss
+++ b/src/app/frontend/common/components/card/style.scss
@@ -37,7 +37,7 @@
 
 .kd-card-actions {
   display: block;
-  padding: $baseline-grid (2 * $baseline-grid);
+  padding: 0 (2 * $baseline-grid);
 }
 
 .kd-card-toggle {
@@ -57,7 +57,7 @@
   font-size: $title-font-size-base;
   font-weight: $regular-font-weight;
   margin-right: $baseline-grid;
-  padding: $baseline-grid 0 $baseline-grid (2 * $baseline-grid);
+  padding: (2 * $baseline-grid) 0 (2 * $baseline-grid) (2 * $baseline-grid);
 }
 
 .kd-card-description {
diff --git a/src/app/frontend/common/components/card/template.html b/src/app/frontend/common/components/card/template.html
index 764d514d9435..6f322b3ab143 100644
--- a/src/app/frontend/common/components/card/template.html
+++ b/src/app/frontend/common/components/card/template.html
@@ -17,6 +17,7 @@
 <mat-card [ngClass]="{'kd-minimized-card': !expanded && !graphMode, 'kd-graph': graphMode}">
   <mat-card-title *ngIf="withTitle"
                   [ngClass]="getTitleClasses()"
+                  (click)="onCardHeaderClick(); $event.stopPropagation()"
                   fxLayoutAlign=" center">
     <div class="kd-card-title"
          fxFlex="100%">
@@ -36,7 +37,7 @@
     </div>
     <button class="kd-card-toggle"
             mat-icon-button
-            (click)="expand()"
+            (click)="expand(); $event.stopPropagation()"
             *ngIf="expandable">
       <mat-icon class="kd-muted"
                 [matTooltip]="expanded ? 'Minimize card' : 'Expand card'">