Improve admin tables row expand

2 files changed, 9 insertions, 4 deletions

diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html
index b0f68eadd..3dd4e8a2a 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@@ -1,6 +1,4 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Jobs list</div>
-
   <div class="select-filter-block">
     <label for="jobType" i18n>Job type</label>
     <div class="peertube-select-container">
@@ -27,6 +25,7 @@
 >
   <ng-template pTemplate="header">
     <tr>
+      <th style="width: 40px"></th>
       <th class="job-id" i18n>ID</th>
       <th class="job-type" i18n>Type</th>
       <th class="job-date" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
@@ -35,7 +34,13 @@
   </ng-template>
 
   <ng-template pTemplate="body" let-expanded="expanded" let-job>
-    <tr class="expander" [pRowToggler]="job">
+    <tr>
+      <td class="expand-cell">
+        <span class="expander" [pRowToggler]="job" i18n-ngbTooltip ngbTooltip="More information">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+
       <td class="job-id" [title]="job.id">{{ job.id }}</td>
       <td class="job-type">{{ job.type }}</td>
       <td class="job-date">{{ job.createdAt }}</td>
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index 4cb706d2d..4a3de9274 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -18,7 +18,7 @@
 }
 
 .admin-sub-header {
-  align-items: flex-end;
+  justify-content: flex-end;
 
   .select-filter-block {
     &:not(:last-child) {