From 0f63326bd53df5352e2a195c2b95303037776cc7 Mon Sep 17 00:00:00 2001
From: baron_l <xAt0mZ@users.noreply.github.com>
Date: Fri, 20 Jul 2018 18:31:34 +0200
Subject: [PATCH] fix(app): wrap long text in tables cells (#1920) (#2052)

* fix(style): wrap long text in tables cells (#1920)

* fix(style): <code> tags are now wrapped correctly (PR #2052)

* fix(style): revert #1770 style-related content and apply nowrap on datatables (PR#2052)
---
 .../containerGroupsDatatable.html                          | 2 +-
 .../datatables/configs-datatable/configsDatatable.html     | 2 +-
 .../containerNetworksDatatable.html                        | 2 +-
 .../containerProcessesDatatable.html                       | 2 +-
 .../containers-datatable/containersDatatable.html          | 2 +-
 .../datatables/events-datatable/eventsDatatable.html       | 2 +-
 .../datatables/images-datatable/imagesDatatable.html       | 2 +-
 .../datatables/networks-datatable/networksDatatable.html   | 2 +-
 .../node-tasks-datatable/nodeTasksDatatable.html           | 2 +-
 .../datatables/nodes-datatable/nodesDatatable.html         | 2 +-
 .../datatables/secrets-datatable/secretsDatatable.html     | 2 +-
 .../service-tasks-datatable/serviceTasksDatatable.html     | 2 +-
 .../datatables/services-datatable/servicesDatatable.html   | 2 +-
 .../datatables/tasks-datatable/tasksDatatable.html         | 2 +-
 .../datatables/volumes-datatable/volumesDatatable.html     | 2 +-
 .../datatables/endpoints-datatable/endpointsDatatable.html | 2 +-
 .../endpointsSnapshotDatatable.html                        | 2 +-
 .../datatables/groups-datatable/groupsDatatable.html       | 2 +-
 .../registries-datatable/registriesDatatable.html          | 2 +-
 .../datatables/stacks-datatable/stacksDatatable.html       | 2 +-
 .../datatables/tags-datatable/tagsDatatable.html           | 2 +-
 .../datatables/teams-datatable/teamsDatatable.html         | 2 +-
 .../datatables/users-datatable/usersDatatable.html         | 2 +-
 assets/css/app.css                                         | 7 ++++++-
 24 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/app/azure/components/datatables/containergroups-datatable/containerGroupsDatatable.html b/app/azure/components/datatables/containergroups-datatable/containerGroupsDatatable.html
index 43af85fa0..8ba81dece 100644
--- a/app/azure/components/datatables/containergroups-datatable/containerGroupsDatatable.html
+++ b/app/azure/components/datatables/containergroups-datatable/containerGroupsDatatable.html
@@ -20,7 +20,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover table-filters">
+        <table class="table table-hover table-filters nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/docker/components/datatables/configs-datatable/configsDatatable.html b/app/docker/components/datatables/configs-datatable/configsDatatable.html
index 26edc4bf4..7c9e5078f 100644
--- a/app/docker/components/datatables/configs-datatable/configsDatatable.html
+++ b/app/docker/components/datatables/configs-datatable/configsDatatable.html
@@ -20,7 +20,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
index 0b4ba9454..9da49860c 100644
--- a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
+++ b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
@@ -26,7 +26,7 @@
         </form>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>Network</th>
diff --git a/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html b/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
index 4e52eaf0e..5449c012d 100644
--- a/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
+++ b/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
@@ -11,7 +11,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th ng-repeat="header in $ctrl.headerset">
diff --git a/app/docker/components/datatables/containers-datatable/containersDatatable.html b/app/docker/components/datatables/containers-datatable/containersDatatable.html
index 8a1cc71bb..2119d8f35 100644
--- a/app/docker/components/datatables/containers-datatable/containersDatatable.html
+++ b/app/docker/components/datatables/containers-datatable/containersDatatable.html
@@ -112,7 +112,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover table-filters">
+        <table class="table table-hover table-filters nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/docker/components/datatables/events-datatable/eventsDatatable.html b/app/docker/components/datatables/events-datatable/eventsDatatable.html
index 432e47a60..77bb95c71 100644
--- a/app/docker/components/datatables/events-datatable/eventsDatatable.html
+++ b/app/docker/components/datatables/events-datatable/eventsDatatable.html
@@ -11,7 +11,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/docker/components/datatables/images-datatable/imagesDatatable.html b/app/docker/components/datatables/images-datatable/imagesDatatable.html
index b21df01c1..fe556201b 100644
--- a/app/docker/components/datatables/images-datatable/imagesDatatable.html
+++ b/app/docker/components/datatables/images-datatable/imagesDatatable.html
@@ -29,7 +29,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover table-filters">
+        <table class="table table-hover table-filters nowrap-cells">
           <thead>
             <tr>
               <th uib-dropdown dropdown-append-to-body auto-close="disabled" popover-placement="bottom-left" is-open="$ctrl.filters.usage.open">
diff --git a/app/docker/components/datatables/networks-datatable/networksDatatable.html b/app/docker/components/datatables/networks-datatable/networksDatatable.html
index 6415c5431..98fb15791 100644
--- a/app/docker/components/datatables/networks-datatable/networksDatatable.html
+++ b/app/docker/components/datatables/networks-datatable/networksDatatable.html
@@ -20,7 +20,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
index 8c1091a24..81c40551e 100644
--- a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
+++ b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
@@ -11,7 +11,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
index cea5183b9..20f575f41 100644
--- a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
+++ b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
@@ -11,7 +11,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
index 1a6d6adf0..4e6a6c148 100644
--- a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
+++ b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
@@ -20,7 +20,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
index 71ee75b3f..433be02d8 100644
--- a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
+++ b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
@@ -1,5 +1,5 @@
 <div style="background-color: #d5e8f3; padding: 2px">
-  <table class="table table-condensed table-hover">
+  <table class="table table-condensed table-hover nowrap-cells">
     <thead style="background-color: #e7f6ff">
       <tr>
         <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" style="width: 10%;">
diff --git a/app/docker/components/datatables/services-datatable/servicesDatatable.html b/app/docker/components/datatables/services-datatable/servicesDatatable.html
index 078573614..8d25b3bf1 100644
--- a/app/docker/components/datatables/services-datatable/servicesDatatable.html
+++ b/app/docker/components/datatables/services-datatable/servicesDatatable.html
@@ -17,7 +17,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th style="width:55px;">
diff --git a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
index 4d965c17a..bbb0e7d18 100644
--- a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
+++ b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
@@ -11,7 +11,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
index 2ffc21be5..58e60e04b 100644
--- a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
+++ b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
@@ -20,7 +20,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover table-filters">
+        <table class="table table-hover table-filters nowrap-cells">
           <thead>
             <tr>
               <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.usage.open">
diff --git a/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html b/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
index e9be3b5dc..ce6122f08 100644
--- a/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
+++ b/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
@@ -20,7 +20,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/portainer/components/datatables/endpoints-snapshot-datatable/endpointsSnapshotDatatable.html b/app/portainer/components/datatables/endpoints-snapshot-datatable/endpointsSnapshotDatatable.html
index 05881c6bd..97ee7e809 100644
--- a/app/portainer/components/datatables/endpoints-snapshot-datatable/endpointsSnapshotDatatable.html
+++ b/app/portainer/components/datatables/endpoints-snapshot-datatable/endpointsSnapshotDatatable.html
@@ -11,7 +11,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search by name, group, tag..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table">
+        <table class="table nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/portainer/components/datatables/groups-datatable/groupsDatatable.html b/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
index 6b0b474fe..70d55de3d 100644
--- a/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
+++ b/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
@@ -20,7 +20,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
index 0fe27f3e9..3dc8f221d 100644
--- a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
+++ b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
@@ -20,7 +20,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
index f5280821a..694eb8014 100644
--- a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
+++ b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
@@ -20,7 +20,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/portainer/components/datatables/tags-datatable/tagsDatatable.html b/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
index 26e5fac12..c96b0fa17 100644
--- a/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
+++ b/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
@@ -17,7 +17,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search...">
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/portainer/components/datatables/teams-datatable/teamsDatatable.html b/app/portainer/components/datatables/teams-datatable/teamsDatatable.html
index 7b838941e..9141226ef 100644
--- a/app/portainer/components/datatables/teams-datatable/teamsDatatable.html
+++ b/app/portainer/components/datatables/teams-datatable/teamsDatatable.html
@@ -17,7 +17,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search...">
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/app/portainer/components/datatables/users-datatable/usersDatatable.html b/app/portainer/components/datatables/users-datatable/usersDatatable.html
index 77fc572ff..df2051f07 100644
--- a/app/portainer/components/datatables/users-datatable/usersDatatable.html
+++ b/app/portainer/components/datatables/users-datatable/usersDatatable.html
@@ -17,7 +17,7 @@
         <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search...">
       </div>
       <div class="table-responsive">
-        <table class="table table-hover">
+        <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
diff --git a/assets/css/app.css b/assets/css/app.css
index f6253b647..344afa8fc 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -140,10 +140,15 @@ a[ng-click]{
   font-weight: normal;
 }
 
-.widget .widget-body table tbody td {
+.widget .widget-body .nowrap-cells tbody td {
   white-space: nowrap;
 }
 
+.widget .widget-body table tbody td {
+  white-space: normal;
+  word-break: break-word;
+}
+
 .template-widget {
   height: 100%;
 }