Refactor app detail component layout and styling for improved responsiveness and clarity

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

@@ -19,11 +19,10 @@
     <span class="title">{{ item.name }}</span>
 
     @if (item.description) {
-      <span class="spacer">|</span>
-      <span class="description">{{ item.description }}</span>
+      <span class="description" [title]="item.description">{{ item.description }}</span>
     }
 
-    <span class="actions">
+    <span class="actions" [ngClass]="{'span-2': !item.description}">
       <button [routerLink]="metadata + '/' + item.id" class="primary outline">View Details</button>
     </span>
   </app-panel>

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

@@ -1,14 +1,32 @@
 :host {
   .authority-item {
-    display: flex;
+    display: inline-grid;
+    gap: 1rem;
     align-items: center;
 
-    .description, .spacer {
+    .span-2 {
+      grid-column: span 2;
+    }
+
+    .description {
       color: var(--neutral-40);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .actions {
       margin-left: auto;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    > .description:before {
+      color: var(--neutral-40);
+      content: '>';
+      margin-right: 1rem;
+
     }
   }
 }

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

@@ -1,25 +1,24 @@
 import {Component, inject, signal} from '@angular/core';
 import {TabGroup, TabGroupComponent} from '../../tab-group/tab-group.component';
-import {SubjectListComponent} from '../../subject/subject-list/subject-list.component';
 import {ListComponent} from '../../list/list.component';
 import {GroupDto} from '../../../clients/gandalf/mithrandir/dtos/group-dto';
 import {RoleDto} from '../../../clients/gandalf/mithrandir/dtos/role-dto';
 import {AuthorityDto} from '../../../clients/gandalf/mithrandir/dtos/authority-dto';
 import {ActivatedRoute, Router, RouterLink} from '@angular/router';
-import {TenantService} from '../../../clients/gandalf/mithrandir/tenant/tenant.service';
 import {PanelComponent} from '../../panel/panel.component';
 import {AppService} from '../../../clients/gandalf/mithrandir/app/app.service';
 import {ActiveTabDirective} from '../../tab-group/active-tab.directive';
+import {NgClass} from '@angular/common';
 
 @Component({
   selector: 'app-app-detail',
   imports: [
     TabGroupComponent,
-    SubjectListComponent,
     ListComponent,
     PanelComponent,
     RouterLink,
-    ActiveTabDirective
+    ActiveTabDirective,
+    NgClass
   ],
   templateUrl: './app-detail.component.html',
   styleUrl: './app-detail.component.scss',

src/angular/frontend/src/app/components/list/list.component.scss

@@ -1,5 +1,12 @@
 :host {
-  display: flex;
+  display: grid;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
+
+  grid-template-columns: min-content auto min-content;
+
+  & > ::ng-deep * {
+    grid-column: span 3;
+    grid-template-columns: subgrid;
+  }
 }

src/dotnet/.idea/.idea.Suspectus.Gandalf/.idea/watcherTasks.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
+</project>