diff --git a/lib/core/styles/_mixins.scss b/lib/core/styles/_mixins.scss
index 6a1ac6994f..d2e2b69d24 100644
--- a/lib/core/styles/_mixins.scss
+++ b/lib/core/styles/_mixins.scss
@@ -1,30 +1,60 @@
-@import 'variables';
+@import "variables";
 
 @mixin no-select {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
-@mixin typo-icon() {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  word-wrap: normal;
-  font-feature-settings: 'liga';
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
+@mixin typo-icon {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    word-wrap: normal;
+    font-feature-settings: 'liga';
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
 }
 
-@mixin material-animation-default($duration:0.2s) {
-  transition-duration: $duration;
-  transition-timing-function: $animation-curve-default;
+@mixin material-animation-default($duration: 0.2s) {
+    transition-duration: $duration;
+    transition-timing-function: $animation-curve-default;
+}
+
+@mixin line-clamp($line-height: 1.25, $lines: 3) {
+    display: block;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    position: relative;
+    line-height: $line-height;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 !important;
+    -webkit-line-clamp: $lines;
+    height: calc(0.99em * #{$line-height} * #{$lines});
+
+    &:after {
+        content: '...';
+        text-align: right;
+        bottom: 0;
+        right: 0;
+        width: 25%;
+        display: block;
+        position: absolute;
+        height: calc(0.99em * #{$line-height});
+    }
+}
+
+@supports (-webkit-line-clamp: 1) {
+    .line-clamp:after  {
+        display: none !important;
+    }
 }
diff --git a/lib/process-services/app-list/apps-list.component.html b/lib/process-services/app-list/apps-list.component.html
index 498ce131f0..dab36c7336 100644
--- a/lib/process-services/app-list/apps-list.component.html
+++ b/lib/process-services/app-list/apps-list.component.html
@@ -24,7 +24,7 @@
                             <h1>{{getAppName(app) | async}}</h1>
                         </div>
                         <mat-card-subtitle class="adf-app-listgrid-item-card-subtitle" fxFlex="1 0 auto">
-                            <p>{{app.description}}</p>
+                            <div class="line-clamp">{{app.description}}</div>
                         </mat-card-subtitle>
 
                         <mat-card-actions class="adf-app-listgrid-item-card-actions">
diff --git a/lib/process-services/app-list/apps-list.component.scss b/lib/process-services/app-list/apps-list.component.scss
index 682a1ab76b..2af14a42ee 100644
--- a/lib/process-services/app-list/apps-list.component.scss
+++ b/lib/process-services/app-list/apps-list.component.scss
@@ -1,3 +1,8 @@
+// TODO: import this mixin from core mixins...
+// -------
+@mixin line-clamp($line-height: 1.25, $lines: 3) { display: block; display: -webkit-box; -webkit-box-orient: vertical; position: relative; line-height: $line-height; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; -webkit-line-clamp: $lines; height: calc(0.99em * #{$line-height} * #{$lines}); &:after { content: '...'; text-align: right; bottom: 0; right: 0; width: 25%; display: block; position: absolute; height: calc(0.99em * #{$line-height}); } } @supports (-webkit-line-clamp: 1) { .line-clamp:after { display: none !important; } }
+// -------
+
 :host {
     width: 100%;
 }
@@ -52,6 +57,7 @@ $themes: (
                 right: 20px;
                 top: 20px;
                 padding: 16px;
+                z-index: 9998;
 
                 &-icon {
                     font-size: 70px;
@@ -69,6 +75,8 @@ $themes: (
 
             &-title {
                 padding: 16px;
+                margin-bottom: 0;
+                z-index: 9999;
 
                 h1 {
                     color: white;
@@ -83,7 +91,13 @@ $themes: (
             }
 
             &-subtitle {
+                color: white;
+                z-index: 9999;
                 padding: 16px;
+
+                .line-clamp {
+                    @include line-clamp(1.25, 3);
+                }
             }
 
             &-actions {