Improve (accessibility title) and move action-buttons on left in tables (#2980)

* Improve and move action-buttons on left in tables

* Focus on my-delete and my-button

* Correct spaces syntax

* Move user-action dropdown on the left

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

1 files changed, 9 insertions, 10 deletions

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 050fe40fb..622d464e4 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -24,16 +24,24 @@
 
   <ng-template pTemplate="header">
     <tr>
+      <th style="width: 150px;">Actions</th>
       <th i18n>Follower handle</th>
       <th style="width: 100px;" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
       <th style="width: 100px;" i18n pSortableColumn="score">Score <p-sortIcon field="score"></p-sortIcon></th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
-      <th style="width: 150px;"></th>
     </tr>
   </ng-template>
 
   <ng-template pTemplate="body" let-follow>
     <tr>
+      <td class="action-cell">
+        <ng-container *ngIf="follow.state === 'pending'">
+          <my-button i18n-title title="Accept" icon="tick" (click)="acceptFollower(follow)"></my-button>
+          <my-button i18n-title title="Refuse" icon="cross" (click)="rejectFollower(follow)"></my-button>
+        </ng-container>
+
+        <my-delete-button label *ngIf="follow.state === 'accepted'" (click)="deleteFollower(follow)"></my-delete-button>
+      </td>
       <td>
         <a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer">
           {{ follow.follower.name + '@' + follow.follower.host }}
@@ -50,15 +58,6 @@
 
       <td>{{ follow.score }}</td>
       <td>{{ follow.createdAt | date: 'short' }}</td>
-
-      <td class="action-cell">
-        <ng-container *ngIf="follow.state === 'pending'">
-          <my-button i18n-title title="Accept" icon="tick" (click)="acceptFollower(follow)"></my-button>
-          <my-button i18n-title title="Refuse" icon="cross" (click)="rejectFollower(follow)"></my-button>
-        </ng-container>
-
-        <my-delete-button *ngIf="follow.state === 'accepted'" (click)="deleteFollower(follow)"></my-delete-button>
-      </td>
     </tr>
   </ng-template>