Fix line clamp temporary (#2747)

lib/core/styles/_mixins.scss

@@ -1,4 +1,4 @@
-@import 'variables';
+@import "variables";
 
 @mixin no-select {
     -webkit-touch-callout: none;
@@ -9,7 +9,7 @@
     user-select: none;
 }
 
-@mixin typo-icon() {
+@mixin typo-icon {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
@@ -24,7 +24,37 @@
     -webkit-font-smoothing: antialiased;
 }
 
-@mixin material-animation-default($duration:0.2s) {
+@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;
+    }
+}

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">

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 {