From e6110f206f62500c19cd802c7c46b1b7b7cfb2aa Mon Sep 17 00:00:00 2001
From: Matthew Wire <devel@mrwire.co.uk>
Date: Sat, 14 Oct 2017 16:10:10 +0100
Subject: [PATCH 1/2] Fix display of 'Recent Items' when using a bootstrap
 theme

---
 css/civicrm.css                        |  5 ++++
 templates/CRM/Block/RecentlyViewed.tpl | 38 ++++++++++++++------------
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/css/civicrm.css b/css/civicrm.css
index e4f2395424b0..67c7081ff6d6 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -1073,6 +1073,7 @@ input.crm-form-entityref {
 #crm-recently-viewed ul {
   list-style-image: none;
   font-size: .9em;
+  padding: 0;
 }
 
 #crm-recently-viewed li.crm-recently-viewed {
@@ -1125,6 +1126,10 @@ input.crm-form-entityref {
   display: block;
 }
 
+.crm-recentview-item {
+  overflow: hidden;
+}
+
 #crm-recently-viewed .crm-recentview-wrapper a:hover {
   color: #494949;
 }
diff --git a/templates/CRM/Block/RecentlyViewed.tpl b/templates/CRM/Block/RecentlyViewed.tpl
index 0cc566c6e446..571bf07520f0 100644
--- a/templates/CRM/Block/RecentlyViewed.tpl
+++ b/templates/CRM/Block/RecentlyViewed.tpl
@@ -25,30 +25,34 @@
 *}
 {* Displays recently viewed objects (contacts and other objects like groups, notes, etc. *}
 <div id="crm-recently-viewed" class="left crm-container">
-    <ul>
+  <ul>
     {foreach from=$recentlyViewed item=item}
-         <li class="crm-recently-viewed" ><a  href="{$item.url}" title="{$item.title|escape:'html'}">
-         {if $item.image_url}
-            <span class="icon crm-icon {if $item.subtype}{$item.subtype}{else}{$item.type}{/if}-icon" style="background: url('{$item.image_url}')"></span>
-         {else}
-            <span class="icon crm-icon {$item.type}{if $item.subtype}-subtype{/if}-icon"></span>
-         {/if}
-         {if $item.isDeleted}<del>{/if}{$item.title|mb_truncate:25:"..":true}{if $item.isDeleted}</del>{/if}</a>
-         <div class="crm-recentview-wrapper">
-           <a href='{$item.url}' class="crm-actions-view">{ts}View{/ts}</a>
-         {if $item.edit_url}<a href='{$item.edit_url}' class="crm-actions-edit">{ts}Edit{/ts}</a>{/if}
-       {if $item.delete_url}<a href='{$item.delete_url}' class="crm-actions-delete">{ts}Delete{/ts}</a>{/if}
-         </div>
-       </li>
+      <li class="crm-recently-viewed">
+        <div class="crm-recentview-item">
+          <a href="{$item.url}" title="{$item.title|escape:'html'}">
+            {if $item.image_url}
+              <span class="icon crm-icon {if $item.subtype}{$item.subtype}{else}{$item.type}{/if}-icon" style="background: url('{$item.image_url}')"></span>
+            {else}
+              <span class="icon crm-icon {$item.type}{if $item.subtype}-subtype{/if}-icon"></span>
+            {/if}
+            {if $item.isDeleted}<del>{/if}{$item.title}{if $item.isDeleted}</del>{/if}
+          </a>
+        </div>
+        <div class="crm-recentview-wrapper">
+          <a href='{$item.url}' class="crm-actions-view">{ts}View{/ts}</a>
+          {if $item.edit_url}<a href='{$item.edit_url}' class="crm-actions-edit">{ts}Edit{/ts}</a>{/if}
+          {if $item.delete_url}<a href='{$item.delete_url}' class="crm-actions-delete">{ts}Delete{/ts}</a>{/if}
+        </div>
+      </li>
     {/foreach}
-   </ul>
+  </ul>
 </div>
 {literal}
-<script type="text/javascript">
+  <script type="text/javascript">
     CRM.$(function($) {
       if ($('#crm-recently-viewed').offset().left > 150) {
         $('#crm-recently-viewed').removeClass('left').addClass('right');
       }
     });
-</script>
+  </script>
 {/literal}

From ad98b8daf978a69cd95ff58e5bb0798b2632c1af Mon Sep 17 00:00:00 2001
From: Matthew Wire <devel@mrwire.co.uk>
Date: Tue, 24 Oct 2017 16:34:10 +0100
Subject: [PATCH 2/2] Even better, add a css ellipsis on text that overflows

---
 css/civicrm.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css/civicrm.css b/css/civicrm.css
index 67c7081ff6d6..a30c25c3c340 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -1128,6 +1128,7 @@ input.crm-form-entityref {
 
 .crm-recentview-item {
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 #crm-recently-viewed .crm-recentview-wrapper a:hover {