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,20 +7,21 @@
       <h2><a {{bind-attr href="usernameUrl"}}>{{name}}</a></h2>
     {{/if}}
 
-    {{#if showBadges}}
+
-      <div class="badge-section">
-        {{#each user.featured_user_badges}}
-          {{user-badge badge=badge}}
-        {{/each}}
-        {{#if showMoreBadges}}
-          {{#link-to 'user.badges' user class="btn more-user-badges"}}
-            {{i18n badges.more_badges count=moreBadgesCount}}
-          {{/link-to}}
-        {{/if}}
-      </div>
-    {{/if}}
   </div>
 
+  {{#if showBadges}}
+    <div class="badge-section">
+      {{#each user.featured_user_badges}}
+        {{user-badge badge=badge}}
+      {{/each}}
+      {{#if showMoreBadges}}
+        {{#link-to 'user.badges' user class="btn more-user-badges"}}
+          {{i18n badges.more_badges count=moreBadgesCount}}
+        {{/link-to}}
+      {{/if}}
+    </div>
+  {{/if}}
   {{#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] {