Use ellipsis in dashboard referred topics table. Add .overflow-ellipsis css helper.

app/assets/javascripts/admin/templates/dashboard.js.handlebars

@@ -214,7 +214,13 @@
         {{#each data in top_referred_topics.data}}
           <tbody>
             <tr>
-              <td class="title"><a href="/t/{{unbound data.topic_slug}}/{{unbound data.topic_id}}">{{shorten data.topic_title}}</a></td>
+              <td class="title">
+                <div class="referred-topic-title">
+                  <div class="overflow-ellipsis">
+                    <a href="/t/{{unbound data.topic_slug}}/{{unbound data.topic_id}}">{{data.topic_title}}</a>
+                  </div>
+                </div>
+              </td>
               <td class="value">{{data.num_clicks}}</td>
             </tr>
           </tbody>

app/assets/javascripts/discourse/controllers/composer_controller.js

@@ -62,7 +62,7 @@ Discourse.ComposerController = Discourse.Controller.extend({
 
         if(topic) {
           buttons.push({
-            "label": I18n.t("composer.reply_here") + "<br/><div class='topic-title'>" + topic.get('title') + "</div>",
+            "label": I18n.t("composer.reply_here") + "<br/><div class='topic-title overflow-ellipsis'>" + topic.get('title') + "</div>",
             "class": "btn btn-reply-here",
             "callback": function(){
               composer.set('topic', topic);
@@ -73,7 +73,7 @@ Discourse.ComposerController = Discourse.Controller.extend({
         }
 
         buttons.push({
-          "label": I18n.t("composer.reply_original") + "<br/><div class='topic-title'>" + this.get('model.topic.title') + "</div>",
+          "label": I18n.t("composer.reply_original") + "<br/><div class='topic-title overflow-ellipsis'>" + this.get('model.topic.title') + "</div>",
           "class": "btn-primary btn-reply-on-original",
           "callback": function(){
             composerController.save(true);

app/assets/stylesheets/admin/admin_base.scss

@@ -489,6 +489,12 @@ table {
       width: 45px;
     }
   }
+
+  .referred-topic-title {
+    width: 410px;
+    @include medium-width { width: 360px; }
+    @include small-width  { width: 320px; }
+  }
 }
 
 

app/assets/stylesheets/application/modal.css.scss

@@ -279,9 +279,6 @@
       .topic-title {
         font-size: 13px;
         font-weight: normal;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
       }
       &.btn-reply-here {
         @include linear-gradient(#ddd, #ddd);

app/assets/stylesheets/foundation/helpers.css.scss

@@ -49,3 +49,12 @@
     clear: both;
   }
 }
+
+// Overflow
+// --------------------------------------------------
+
+.overflow-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}