From 2be11e60118210ef91445222228d87a461c78df9 Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Wed, 7 Apr 2021 17:58:10 +0200
Subject: [PATCH] B #5320: Fix grid layout in sunstone dashboard (#1076)

---
 src/sunstone/public/app/tabs/dashboard-tab/hosts.hbs | 12 +++++++++---
 .../public/app/tabs/dashboard-tab/network.hbs        |  8 ++++++--
 .../public/app/tabs/dashboard-tab/storage.hbs        |  8 ++++++--
 src/sunstone/public/app/tabs/dashboard-tab/users.hbs |  8 ++++++--
 src/sunstone/public/app/tabs/dashboard-tab/vms.hbs   | 12 +++++++++---
 src/sunstone/public/css/custom.css                   |  7 ++++++-
 6 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/sunstone/public/app/tabs/dashboard-tab/hosts.hbs b/src/sunstone/public/app/tabs/dashboard-tab/hosts.hbs
index 1b1c742228..0ed6e0cf59 100644
--- a/src/sunstone/public/app/tabs/dashboard-tab/hosts.hbs
+++ b/src/sunstone/public/app/tabs/dashboard-tab/hosts.hbs
@@ -33,15 +33,21 @@
       <div class="small-12 medium-6 columns">
         <div class="card small-12 medium-4 columns">
           <h3 class="on_hosts fadeinout success-color number-title">0</h3>
-          <span class="small-12 medium-12 columns label-card" style="padding:0;">{{tr "MONITORED"}}</span>
+          <span class="small-12 medium-12 columns label-card" title="{{tr 'MONITORED'}}">
+            {{tr "MONITORED"}}
+          </span>
         </div>
         <div class="card small-12 medium-4 columns">
             <h3 class="off_hosts fadeinout warning-color number-title">0</h3>
-            <span class="small-12 medium-12 columns label-card" style="padding:0;">{{tr "DISABLED"}}</span>
+            <span class="small-12 medium-12 columns label-card" title="{{tr 'DISABLED'}}">
+              {{tr "DISABLED"}}
+            </span>
         </div>
         <div class="card small-12 medium-4 columns">
             <h3 class="error_hosts fadeinout alert-color number-title">0</h3>
-            <span class="small-12 medium-12 columns label-card" style="padding:0;">{{tr "FAILED"}}</span>
+            <span class="small-12 medium-12 columns label-card" title="{{tr 'FAILED'}}">
+              {{tr "FAILED"}}
+            </span>
         </div>
       </div>
     </div>
diff --git a/src/sunstone/public/app/tabs/dashboard-tab/network.hbs b/src/sunstone/public/app/tabs/dashboard-tab/network.hbs
index 8606a694e9..9b228c02c4 100644
--- a/src/sunstone/public/app/tabs/dashboard-tab/network.hbs
+++ b/src/sunstone/public/app/tabs/dashboard-tab/network.hbs
@@ -27,11 +27,15 @@
     <div class="row">
       <div class="card small-12 medium-6 columns">
         <h3 class="total_vnets fadeinout number-title">0</h3>
-        <span class="small-12 medium-12 columns label-card">{{tr "VNETS"}}</span>
+        <span class="small-12 medium-12 columns label-card" title="{{tr 'VNETS'}}">
+          {{tr "VNETS"}}
+        </span>
       </div>
       <div class="card small-12 medium-6 columns">
           <h3 class="addresses_vnets fadeinout number-title">0</h3>
-          <span class="small-12 medium-12 columns label-card">{{tr "USED IPs"}}</span>
+          <span class="small-12 medium-12 columns label-card" title="{{tr 'USED IPs'}}">
+            {{tr "USED IPs"}}
+          </span>
       </div>
     </div>
   </fieldset>
diff --git a/src/sunstone/public/app/tabs/dashboard-tab/storage.hbs b/src/sunstone/public/app/tabs/dashboard-tab/storage.hbs
index 2b2b54af15..15e797b754 100644
--- a/src/sunstone/public/app/tabs/dashboard-tab/storage.hbs
+++ b/src/sunstone/public/app/tabs/dashboard-tab/storage.hbs
@@ -27,11 +27,15 @@
     <div class="row">
       <div class="card small-12 medium-6 columns">
         <h3 class="total_images fadeinout number-title">0</h3>
-        <span class="small-12 medium-12 columns label-card">{{tr "IMAGES"}}</span>
+        <span class="small-12 medium-12 columns label-card" title="{{tr 'IMAGES'}}">
+          {{tr "IMAGES"}}
+        </span>
       </div>
       <div class="card small-12 medium-6 columns">
           <h3 class="size_images fadeinout number-title">0</h3>
-          <span class="small-12 medium-12 columns label-card">{{tr "USED"}}</span>
+          <span class="small-12 medium-12 columns label-card" title="{{tr 'USED'}}">
+            {{tr "USED"}}
+          </span>
       </div>
     </div>
   </fieldset>
diff --git a/src/sunstone/public/app/tabs/dashboard-tab/users.hbs b/src/sunstone/public/app/tabs/dashboard-tab/users.hbs
index b935a24038..c7bb71a051 100644
--- a/src/sunstone/public/app/tabs/dashboard-tab/users.hbs
+++ b/src/sunstone/public/app/tabs/dashboard-tab/users.hbs
@@ -28,11 +28,15 @@
     <div class="row">
       <div class="card small-12 medium-6 columns">
         <h3 class="total_users fadeinout number-title">0</h3>
-        <span class="small-12 medium-12 columns label-card">{{tr "USERS"}}</span>
+        <span class="small-12 medium-12 columns label-card" title="{{tr 'USERS'}}">
+          {{tr "USERS"}}
+        </span>
       </div>
       <div class="card small-12 medium-6 columns">
           <h3 class="total_groups fadeinout number-title">0</h3>
-          <span class="small-12 medium-12 columns label-card">{{tr "GROUPS"}}</span>
+          <span class="small-12 medium-12 columns label-card" title="{{tr 'GROUPS'}}">
+            {{tr "GROUPS"}}
+          </span>
       </div>
     </div>
   </fieldset>
diff --git a/src/sunstone/public/app/tabs/dashboard-tab/vms.hbs b/src/sunstone/public/app/tabs/dashboard-tab/vms.hbs
index 942ddb306e..0af23c6277 100644
--- a/src/sunstone/public/app/tabs/dashboard-tab/vms.hbs
+++ b/src/sunstone/public/app/tabs/dashboard-tab/vms.hbs
@@ -30,15 +30,21 @@
     <div class="row">
       <div class="card small-12 medium-4 columns">
         <h3 class="total_vms fadeinout number-title">0</h3>
-        <span class="small-12 medium-12 columns label-card">{{tr "TOTAL"}}</span>
+        <span style="" class="small-12 medium-12 columns label-card" title="{{tr 'TOTAL'}}">
+          {{tr "TOTAL"}}
+        </span>
       </div>
       <div class="card small-12 medium-4 columns">
           <h3 class="pending_vms fadeinout warning-color number-title">0</h3>
-          <span class="small-12 medium-12 columns label-card">{{tr "PENDING"}}</span>
+          <span class="small-12 medium-12 columns label-card" title="{{tr 'PENDING'}}">
+            {{tr "PENDING"}}
+          </span>
       </div>
       <div class="card small-12 medium-4 columns">
           <h3 class="failed_vms fadeinout alert-color number-title">0</h3>
-          <span class="small-12 medium-12 columns label-card">{{tr "FAILED"}}</span>
+          <span class="small-12 medium-12 columns label-card" title="{{tr 'FAILED'}}">
+            {{tr "FAILED"}}
+          </span>
       </div>
     </div>
   </fieldset>
diff --git a/src/sunstone/public/css/custom.css b/src/sunstone/public/css/custom.css
index 32b5c82371..baa17ae5a9 100644
--- a/src/sunstone/public/css/custom.css
+++ b/src/sunstone/public/css/custom.css
@@ -185,8 +185,13 @@ meter {
 .number-title{
   margin-top: -15px;
 }
-.label-card{
+.label-card {
   margin-top: -25px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
 }
 .dashboard-fieldset{
   background-color: #f8f8f8;