From eb619c8e98cc4cf4eec3156f93fc9121aa637721 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 4 Aug 2020 16:47:50 -0400
Subject: [PATCH] prevent long email addresses from breaking admin table layout

---
 .../javascripts/admin/templates/email-sent.hbs       | 12 ++++++------
 app/assets/stylesheets/common/admin/emails.scss      |  6 ++++++
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/email-sent.hbs b/app/assets/javascripts/admin/templates/email-sent.hbs
index ab0afaaf2da..d213f4b3735 100644
--- a/app/assets/javascripts/admin/templates/email-sent.hbs
+++ b/app/assets/javascripts/admin/templates/email-sent.hbs
@@ -19,9 +19,9 @@
       </tr>
 
       {{#each model as |l|}}
-        <tr>
-          <td>{{format-date l.created_at}}</td>
-          <td>
+        <tr class="sent-email-item">
+          <td class="sent-email-date">{{format-date l.created_at}}</td>
+          <td class="sent-email-username">
             {{#if l.user}}
               {{#link-to "adminUser" l.user}}{{avatar l.user imageSize="tiny"}}{{/link-to}}
               {{#link-to "adminUser" l.user}}{{l.user.username}}{{/link-to}}
@@ -29,12 +29,12 @@
               &mdash;
             {{/if}}
           </td>
-          <td>
+          <td class="sent-email-address">
             {{#if l.bounced}}{{d-icon "redo" title="admin.email.bounced"}}{{/if}}
             <a href="mailto:{{l.to_address}}">{{l.to_address}}</a>
           </td>
-          <td>{{l.email_type}}</td>
-          <td class="post-link">
+          <td class="sent-email-type">{{l.email_type}}</td>
+          <td class="sent-email-post-link">
             {{#if l.post_url}}
               <a href={{l.post_url}}>{{l.post_description}}</a>
               <span class="reply-key">{{l.reply_key}}</span>
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
index 3c1417cd806..bfa39c232f2 100644
--- a/app/assets/stylesheets/common/admin/emails.scss
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -22,6 +22,12 @@
     max-width: 200px;
     @include ellipsis;
   }
+  .sent-email-address a {
+    // prevent long email addresses from breaking the layout
+    display: inline-block;
+    max-width: 300px;
+    overflow-wrap: break-word;
+  }
 }
 
 .incoming-emails {