From b8ef8bd67e2b7b6a2fd4c40bac658cd533c3e0cf Mon Sep 17 00:00:00 2001
From: chris <cwer542@gmail.com>
Date: Tue, 11 Nov 2025 22:49:56 +0100
Subject: [PATCH] Enhance app detail component with improved tab actions layout
 and styling

---
 .../app/app-detail/app-detail.component.html     | 16 +++++++++++++++-
 .../app/app-detail/app-detail.component.scss     | 10 +++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/angular/frontend/src/app/components/app/app-detail/app-detail.component.html b/src/angular/frontend/src/app/components/app/app-detail/app-detail.component.html
index ac097c4..6bdcc3b 100644
--- a/src/angular/frontend/src/app/components/app/app-detail/app-detail.component.html
+++ b/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>
diff --git a/src/angular/frontend/src/app/components/app/app-detail/app-detail.component.scss b/src/angular/frontend/src/app/components/app/app-detail/app-detail.component.scss
index ca4ef29..16677ad 100644
--- a/src/angular/frontend/src/app/components/app/app-detail/app-detail.component.scss
+++ b/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 {