From 2fde06ba08c71920dc2eaf0c48ccb0d0f9f81a77 Mon Sep 17 00:00:00 2001
From: Arpit Jalan <arpit@techapj.com>
Date: Tue, 17 Nov 2020 18:01:40 +0530
Subject: [PATCH] UX: handle large email addresses on email skipped and bounced
 tabs (#11259)

---
 .../javascripts/admin/addon/templates/email-bounced.hbs       | 2 +-
 .../javascripts/admin/addon/templates/email-skipped.hbs       | 2 +-
 app/assets/stylesheets/common/admin/emails.scss               | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/templates/email-bounced.hbs b/app/assets/javascripts/admin/addon/templates/email-bounced.hbs
index 85a8ff0d27a..e1c995437c0 100644
--- a/app/assets/javascripts/admin/addon/templates/email-bounced.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-bounced.hbs
@@ -27,7 +27,7 @@
               &mdash;
             {{/if}}
           </td>
-          <td><a href="mailto:{{l.to_address}}">{{l.to_address}}</a></td>
+          <td class="email-address"><a href="mailto:{{l.to_address}}">{{l.to_address}}</a></td>
           {{#if l.has_bounce_key}}
             <td><a href {{action "showIncomingEmail" l.id}}>{{l.email_type}}</a></td>
           {{else}}
diff --git a/app/assets/javascripts/admin/addon/templates/email-skipped.hbs b/app/assets/javascripts/admin/addon/templates/email-skipped.hbs
index f125beef36c..3dc05cfc720 100644
--- a/app/assets/javascripts/admin/addon/templates/email-skipped.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email-skipped.hbs
@@ -29,7 +29,7 @@
               &mdash;
             {{/if}}
           </td>
-          <td><a href="mailto:{{l.to_address}}">{{l.to_address}}</a></td>
+          <td class="email-address"><a href="mailto:{{l.to_address}}">{{l.to_address}}</a></td>
           <td>{{l.email_type}}</td>
           <td>
             {{#if l.post_url}}
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
index bfa39c232f2..ddb2a0010a9 100644
--- a/app/assets/stylesheets/common/admin/emails.scss
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -28,6 +28,10 @@
     max-width: 300px;
     overflow-wrap: break-word;
   }
+  .email-address {
+    max-width: 250px;
+    @include ellipsis;
+  }
 }
 
 .incoming-emails {