From a2d9734b8b47f81338c437b0b8c674ed85976e78 Mon Sep 17 00:00:00 2001
From: Alice Groux <alice.grx@gmail.com>
Date: Sun, 17 Jan 2021 04:50:22 +0100
Subject: [PATCH] fix(k8s/datatables): reduce size of collapse/expand column
 for stacks datatable and storage datatable (#4511)

* fix(k8s/datatables): reduce size of collapse/expand column for stacks datatable and storage datatable

* fix(k8s/datatables): reduce size of expand/collapse column
---
 .../applicationsStacksDatatable.html                  |  7 ++++---
 .../volumes-storages-datatable/template.html          | 11 ++++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html b/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
index 4bef79088..af6192325 100644
--- a/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
+++ b/app/kubernetes/components/datatables/applications-stacks-datatable/applicationsStacksDatatable.html
@@ -71,7 +71,7 @@
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
-              <th>
+              <th style="width: 55px;">
                 <span class="md-checkbox">
                   <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
                   <label for="select_all"></label>
@@ -142,8 +142,9 @@
               </td>
             </tr>
             <tr dir-paginate-end ng-show="item.Expanded" ng-repeat="app in item.Applications" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
-              <td colspan="5">
-                <a ui-sref="kubernetes.applications.application({ name: app.Name, namespace: app.ResourcePool })" style="margin-left: 25px;">{{ app.Name }}</a>
+              <td></td>
+              <td colspan="4">
+                <a ui-sref="kubernetes.applications.application({ name: app.Name, namespace: app.ResourcePool })">{{ app.Name }}</a>
                 <span style="margin-left: 5px;" class="label label-primary image-tag" ng-if="!$ctrl.isSystemNamespace(app.ResourcePool) && $ctrl.isExternalApplication(app)"
                   >external</span
                 >
diff --git a/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html b/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html
index 5d1f090c4..b0130ab5c 100644
--- a/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html
+++ b/app/kubernetes/views/volumes/components/volumes-storages-datatable/template.html
@@ -58,19 +58,19 @@
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
-              <th style="width: 10%;">
+              <th style="width: 20px;">
                 <a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()">
                   <i ng-class="{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden="true"></i>
                 </a>
               </th>
-              <th style="width: 55%;">
+              <th style="width: 60%;">
                 <a ng-click="$ctrl.changeOrderBy('Name')">
                   Storage
                   <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
                   <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
                 </a>
               </th>
-              <th style="width: 35%;">
+              <th style="width: 38%;">
                 <a ng-click="$ctrl.changeOrderBy('Size')">
                   Usage
                   <i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && !$ctrl.state.reverseOrder"></i>
@@ -96,8 +96,9 @@
               <td>{{ item.Size }}</td>
             </tr>
             <tr dir-paginate-end ng-show="item.Expanded" ng-repeat="vol in item.Volumes" ng-style="{ background: item.Highlighted ? '#d5e8f3' : '#f5f5f5' }">
-              <td colspan="2">
-                <a ui-sref="kubernetes.volumes.volume({ name: vol.PersistentVolumeClaim.Name, namespace: vol.PersistentVolumeClaim.Namespace })" style="margin-left: 25px;">
+              <td></td>
+              <td>
+                <a ui-sref="kubernetes.volumes.volume({ name: vol.PersistentVolumeClaim.Name, namespace: vol.PersistentVolumeClaim.Namespace })">
                   {{ vol.PersistentVolumeClaim.Name }}
                 </a>
               </td>