Refs errbit#1011 problems index layout fix

Long names in the problems index can blow up the table layout, causing
ugliness and potentially horizontal scrolling. This change adds
whitespace: nowrap and sets a few td widths to keep the layout from
jumping around.

Author: stevecrozz

app/assets/stylesheets/errbit.css.erb

@@ -615,7 +615,7 @@ div.issue_tracker.nested label.r_on, div.issue_tracker.nested label.r_on:hover,
 /* Apps Table */
 table.apps tbody tr:hover td ,table.errs tbody tr:hover td { background-color: #F2F2F2;}
 
-table.apps td.name, table.errs td.message { width: 100%; }
+table.apps td.name { width: 100%; }
 table.apps td { padding: 16px 20px; }
 table.apps th { padding: 10px 20px; }
 
@@ -665,9 +665,12 @@ td.count, td.issue_link {
 }
 
 /* Err Tables */
-table.errs td.app {
-  padding-right: 2em;
-  width: 20%;
+table.errs td.app .name {
+  display: block;
+  width: 150px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 table.errs td.app .environment {
   font-size: 0.8em;
@@ -676,12 +679,10 @@ table.errs td.app .environment {
 table.errs td.message a {
   display: block;
   word-wrap: break-word;
-  /* PjpG - configuration in WHAT & WHERE table's columns using ellipsis to avoid oversizing table's width */
-    width: 300px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -o-text-overflow: ellipsis;
-  /* ------ */
+  width: 440px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 table.errs td.message em {
   color: #727272;

app/helpers/problems_helper.rb

@@ -3,17 +3,6 @@ def problem_confirm(action)
     t(format('problems.confirm.%s', action)) unless Errbit::Config.confirm_err_actions.eql? false
   end
 
-  def truncated_problem_message(problem)
-    msg = problem.message
-    return if msg.blank?
-
-    # Truncate & insert invisible chars so that firefox can emulate
-    # 'word-wrap: break-word' CSS rule
-    truncate(msg, length: 300, escape: false).
-      scan(/.{1,5}/).map { |s| h(s) }.
-      join("​").html_safe
-  end
-
   def gravatar_tag(email, options = {})
     return nil unless email.present?
 

app/views/problems/_table.html.haml

@@ -17,13 +17,13 @@
           %td.select
             = check_box_tag "problems[]", problem.id, selected_problems.member?(problem.id.to_s)
           %td.app
-            = link_to problem.app.name, app_path(problem.app)
+            = link_to problem.app.name, app_path(problem.app), class: 'name', title: problem.app.name
             - if current_page?(:controller => 'problems')
               %span.environment= link_to problem.environment, problems_path(:environment => problem.environment)
             - else
               %span.environment= link_to problem.environment, app_path(problem.app, :environment => problem.environment)
           %td.message
-            = link_to truncated_problem_message(problem), app_problem_path(problem.app, problem)
+            = link_to problem.message, app_problem_path(problem.app, problem), title: problem.message
             %em= problem.where
             - if problem.comments_count > 0
               - comment = problem.comments.last

spec/helpers/problems_helper_spec.rb

@@ -1,20 +1,4 @@
 describe ProblemsHelper do
-  describe '#truncated_problem_message' do
-    it 'is html safe' do
-      problem = double('problem', message: '#<NoMethodError: ...>')
-      truncated = helper.truncated_problem_message(problem)
-      expect(truncated).to be_html_safe
-      expect(truncated).to_not include('<', '>')
-    end
-
-    it 'does not double escape html' do
-      problem = double('problem', message: '#<NoMethodError: ...>')
-      truncated = helper.truncated_problem_message(problem)
-      expect(truncated).to be_html_safe
-      expect(truncated).to_not include('&amp;')
-    end
-  end
-
   describe "#gravatar_tag" do
     let(:email) { "[email protected]" }
     let(:email_hash) { Digest::MD5.hexdigest email }