Enhance app detail component with improved tab actions layout and styling

src/angular/frontend/src/app/components/app/app-detail/app-detail.component.html

@@ -1,14 +1,24 @@
 <app-tab-group [tabs]="tabs" (tabChanged)="tabChanged($event)" [activeTabId]="activeTabId()">
 
   <ng-template tabId="groups" let-tab>
+    <div class="tab-actions">
+      <span>{{tab.name}}</span>
+    </div>
     <app-list [itemTemplate]="authorityItem" [items]="groups()" [loading]="groupsLoading()" metadata="group"></app-list>
   </ng-template>
 
   <ng-template tabId="roles" let-tab>
+    <div class="tab-actions">
+      <span>{{tab.name}}</span>
+    </div>
     <app-list [itemTemplate]="authorityItem" [items]="roles()" [loading]="rolesLoading()" metadata="role"></app-list>
   </ng-template>
 
   <ng-template tabId="authorities" let-tab>
+    <div class="tab-actions">
+      <span>{{tab.name}}</span>
+      <button class="primary" popovertarget="authority-form">Add</button>
+    </div>
     <app-list [itemTemplate]="authorityItem" [items]="authorities()" [loading]="authoritiesLoading()" metadata="authority"></app-list>
   </ng-template>
 
@@ -23,7 +33,11 @@
     }
 
     <span class="actions" [ngClass]="{'span-2': !item.description}">
-      <button [routerLink]="metadata + '/' + item.id" class="primary outline">View Details</button>
+      <button [routerLink]="metadata + '/' + item.id" class="secondary outline">View Details</button>
     </span>
   </app-panel>
 </ng-template>
+
+<div id="authority-form" popover>
+  HELLO EL CRINGO
+</div>

src/angular/frontend/src/app/components/app/app-detail/app-detail.component.scss

@@ -1,9 +1,17 @@
 :host {
 
   .tab-actions {
-    margin-left: auto;
     display: flex;
     gap: 1rem;
+    min-height: 40px;
+
+    align-items: center;
+
+    > *:first-child {
+      margin: 0 auto 0 0;
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
   }
 
   .authority-item {