Fixes #4391 when text overflows, hide it. Also make the column widths using % rather than pixel values.

2 files changed, 7 insertions, 5 deletions

diff --git a/plugins/Live/stylesheets/live.less b/plugins/Live/stylesheets/live.less
index e476e74371..cb76a1078a 100644
--- a/plugins/Live/stylesheets/live.less
+++ b/plugins/Live/stylesheets/live.less
@@ -177,6 +177,8 @@ ol.visitorLog p {
 }
 .dataTableVizVisitorLog table.dataTable .label {
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .dataTableVizVisitorLog .dataTableWrapper {
diff --git a/plugins/Live/templates/_dataTableViz_visitorLog.twig b/plugins/Live/templates/_dataTableViz_visitorLog.twig
index 5101544f9d..a0a0d99716 100644
--- a/plugins/Live/templates/_dataTableViz_visitorLog.twig
+++ b/plugins/Live/templates/_dataTableViz_visitorLog.twig
@@ -4,20 +4,20 @@
 <thead>
 <tr>
     <th style="display:none;"></th>
-    <th id="label" class="sortable label" style="cursor: auto;width:190px;" width="190px">
+    <th id="label" class="sortable label" style="cursor: auto; width: 20%; ">
         <div id="thDIV">{{ 'General_Date'|translate }}</div>
     </th>
     {% if displayVisitorsInOwnColumn %}
-        <th id="label" class="sortable label" style="cursor: auto;width:225px;" width="225px">
+        <th id="label" class="sortable label" style="cursor: auto;width: 15%;">
             <div id="thDIV">{{ 'General_Visitors'|translate }}</div>
         </th>
     {% endif %}
     {% if displayReferrersInOwnColumn %}
-    <th id="label" class="sortable label" style="cursor: auto;width:230px;" width="230px">
+    <th id="label" class="sortable label" style="cursor: auto;width: 15%">
         <div id="thDIV">{{ 'Live_Referrer_URL'|translate }}</div>
     </th>
     {% endif %}
-    <th id="label" class="sortable label" style="cursor: auto;">
+    <th id="label" class="sortable label" style="cursor: auto;width: 60%">
         <div id="thDIV">{{ 'General_ColumnNbActions'|translate }}</div>
     </th>
 </tr>
@@ -141,7 +141,7 @@ GPS (lat/long): {{ visitor.getColumn('latitude') }},{{ visitor.getColumn('longit
                 {% if visitor.getColumn('provider') %}
                     <br/>
                     {{ 'Provider_ColumnProvider'|translate }}:
-                    <a href="{{ visitor.getColumn('providerUrl') }}" rel="noreferrer" target="_blank" title="{{ visitor.getColumn('providerUrl') }}" style="text-decoration:underline;">
+                    <a href="{{ visitor.getColumn('providerUrl') }}" rel="noreferrer" target="_blank" title="{{ visitor.getColumn('providerName') }} {{ visitor.getColumn('providerUrl') }}" style="text-decoration:underline;">
                         {{ visitor.getColumn('providerName') }}
                     </a>
                 {% endif %}