UX: Cap height of user fields on mobile user-cards, add line-clamp mixin

app/assets/stylesheets/common/foundation/mixins.scss

@@ -63,6 +63,15 @@ $breakpoints: (
   text-overflow: ellipsis;
 }
 
+@mixin line-clamp($lines) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: break-word;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+}
+
 //
 // --------------------------------------------------
 

app/assets/stylesheets/common/topic-timeline.scss

@@ -79,18 +79,12 @@
       }
       .post-excerpt {
         max-width: 650px;
-        max-height: 165px;
         line-height: $line-height-large;
-        overflow: hidden;
-        word-wrap: break-word;
-        text-overflow: ellipsis;
         display: block;
-        display: -webkit-box;
+        @include line-clamp(8);
-        -webkit-line-clamp: 8;
         @media screen and (max-height: 425px) {
           -webkit-line-clamp: 5;
         }
-        -webkit-box-orient: vertical;
       }
       .username {
         color: dark-light-choose($primary-high, $secondary-low);
@@ -106,15 +100,9 @@
         h2 {
           margin-top: 0;
           display: block;
-          display: -webkit-box;
-          -webkit-line-clamp: 4;
-          -webkit-box-orient: vertical;
-          max-height: 110px;
           line-height: $line-height-medium;
-          word-wrap: break-word;
-          text-overflow: ellipsis;
-          overflow: hidden;
           font-size: $font-up-2;
+          @include line-clamp(4);
         }
         a {
           color: $primary;

app/assets/stylesheets/mobile/components/user-card.scss

@@ -73,6 +73,17 @@ $avatar_width: 120px;
       width: 100%;
     }
   }
+
+  .public-user-fields {
+    @media screen and (max-height: 550px) {
+      max-height: 12vh;
+    }
+    max-height: 40vh;
+    overflow-y: auto;
+    .public-user-field {
+      @include line-clamp(3);
+    }
+  }
 }
 
 // mobile card cloak