SUP-2143, Dashboard--> Texts are overlapping on my challenges on mobile device.

-- Fixed roles overflow

Author: vikasrohit

app/directives/challenge-tile/challenge-tile.directive.jade

@@ -63,7 +63,9 @@
       design-challenge-user-place(challenge="challenge", view="view")
 
     // Only show if not data science track
-    p.roles(ng-hide="challenge.track === 'DATA_SCIENCE'") #[span Role:  ] #[span {{challenge.userDetails.roles | listRoles}}]
+    p.roles
+      span(ng-hide="challenge.track === 'DATA_SCIENCE'") 
+        #[span Role:  ] #[span {{challenge.userDetails.roles | listRoles}}]
 
 .challenge.list-view(ng-show="view=='list'", ng-class="challenge.track")
   .active-challenge(ng-show="challenge.status === 'ACTIVE'")

assets/css/directives/challenge-tile.scss

@@ -71,13 +71,12 @@ challenge-tile .challenge.tile-view {
     line-height: 18px;
     background-color: $gray-lighter;
 
-    span:first-child {
-      color: $accent-gray;
-      white-space: nowrap;
-    }
-
-    span:not(:first-child) {
+    span {
       @include ellipsis;
+      span:first-child {
+        color: $accent-gray;
+        white-space: nowrap;
+      }
     }
 
   }