truncating loooooooooong name fields

app/assets/javascripts/discourse/templates/group/index.js.handlebars

@@ -8,7 +8,7 @@
           <a href="{{unbound url}}">{{unbound title}}</a>
         </span>
         {{#if byName}}
-          <span class="title">
+          <span class="name">
             {{unbound byName}}
           </span>
         {{/if}}

app/assets/javascripts/discourse/templates/poster_expansion.handlebars

@@ -7,6 +7,9 @@
       <h2><a {{bind-attr href="usernameUrl"}}>{{name}}</a></h2>
     {{/if}}
 
+
+  </div>
+
   {{#if showBadges}}
     <div class="badge-section">
       {{#each user.featured_user_badges}}
@@ -19,8 +22,6 @@
       {{/if}}
     </div>
   {{/if}}
-  </div>
-
   {{#if user}}
     <div class="metadata">
       {{#if user.location}}<h3><i class="fa fa-map-marker"></i> {{user.location}}</h3>{{/if}}

app/assets/stylesheets/common/base/header.scss

@@ -44,6 +44,10 @@
       a {
         color: $header_primary;
         font-size: 14px;
+        max-width: 200px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
     button.login-button {

app/assets/stylesheets/common/base/topic-post.scss

@@ -6,6 +6,11 @@
  span {
    font-size: 13px;
    padding-right: 8px;
+   display: inline-block;
+   max-width: 280px;
+   white-space: nowrap;
+   overflow: hidden;
+   text-overflow: ellipsis;
    a {
      color: scale-color($primary, $lightness: 30%);
    }

app/assets/stylesheets/desktop/poster_expansion.scss

@@ -13,20 +13,27 @@
   h1 {
     display: inline-block;
     min-width: 120px;
-    font-size: 30px;
+    font-size: 25px;
-    line-height: 33px;
+    line-height: 1.25;
-    margin-bottom: 8px;
+    display: block;
-
+    max-width: 280px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     a {
       color: $primary;
     }
   }
 
   h2 {
-    font-size: 20px;
+    font-size: 15px;
-    line-height: 22px;
+    line-height: 1.25;
     font-weight: normal;
-    margin-bottom: 5px;
+    display: block;
+    max-width: 280px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     a {
       color: $primary;
@@ -51,10 +58,11 @@
   }
 
   .metadata {
-    float: right;
+    position: absolute;
+    right: 20px;
+    top: 10px;
     max-width: 180px;
     text-align: right;
-    margin-top: 5px;
   }
 
   .bottom {
@@ -101,16 +109,12 @@
       float: left;
     }
 
-
-
-    h2 {
-      line-height: 12px;
-    }
-
     .badge-section {
       margin-top: 10px;
+      float: left;
+      width: 300px;
+
       h3 {
-        line-height: 43px;
         color: $primary;
         font-size: 14px;
         margin-bottom: -8px;
@@ -120,7 +124,6 @@
     .more-user-badges {
       @extend .user-badge;
       padding: 3px 8px;
-      line-height: 19px;
       font-size: 13px;
     }
   }

app/assets/stylesheets/desktop/user.scss

@@ -102,6 +102,12 @@
 
   table.group-members {
     width: 100%;
+    p {
+      max-width: 600px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
     th.seen {
       text-align: right;
     }
@@ -175,6 +181,10 @@
         margin-bottom: 6px;
         font-weight: normal;
         margin-top: 5px;
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       a[href] {
@@ -331,6 +341,18 @@
     .title {
       display: block;
       font-size: 14px;
+      max-width: 80%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .name {
+      display: block;
+      font-size: 14px;
+      max-width: 400px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .edit-reason {
       background-color: scale-color($highlight, $lightness: 25%);

app/assets/stylesheets/mobile/user.scss

@@ -117,6 +117,10 @@
         font-size: 20px;
         margin-bottom: 6px;
         font-weight: normal;
+        max-width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       a[href] {