Fix mobile layout for Chrome Mobile

src/app/components/feed/postlist/postlist.component.html

@@ -27,7 +27,7 @@
   <mat-card-actions>
     <div *ngIf="post.activity" class="activity-info" fxHide.gt-sm="true">
       <span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200">
-        {{post.activity.points}} points earned through <b>{{post.activity.name}}</b>
+        +{{post.activity.points}} points with <b>{{post.activity.name}}</b>
       </span>
     </div>
     <div class="postVoteButtons">
@@ -44,7 +44,7 @@
     </div>
     <div *ngIf="post.activity" class="activity-info" fxHide.lt-md="true">
       <span class="span" [matTooltip]="post.activity.description" matTooltipShowDelay="200">
-        {{post.activity.points}} points earned through <b>{{post.activity.name}}</b>
+        {{post.activity.points}} points earned with <b>{{post.activity.name}}</b>
       </span>
     </div>
   </mat-card-actions>

src/app/components/feed/postlist/postlist.component.sass

@@ -27,11 +27,13 @@ $mat-card-header-size: 40px !default
     margin: 0
 
   .postlistUsername, a
-    cursor: pointer
     margin-right: 0.4em
     &:hover
       text-decoration: underline
 
+  .postlistUsername
+    cursor: pointer
+
   .postVoteButtons
     display: inline-block
 
@@ -57,8 +59,7 @@ $mat-card-header-size: 40px !default
   .mat-button
     min-width: 32px !important
     padding: 0
-    margin: 0
-    margin-left: 8px
+    margin: 0 0 0 8px
 
   .profile-picture
     border-radius: 50%
@@ -84,7 +85,6 @@ $mat-card-header-size: 40px !default
   @media (max-width: 959px)
     .activity-info > .span
       margin-left: 1em
-      width: calc(100% - 1em)
       display: block
       text-align: left
     .postVoteButtons
@@ -98,7 +98,7 @@ $mat-card-header-size: 40px !default
           scale: 1.1
 
     .mat-card-actions
-      display: flex
+      display: -webkit-box
       justify-content: end
       align-items: center