From 44b4e3e05de555b380775a86430dc490ae52b916 Mon Sep 17 00:00:00 2001
From: chris <cwer542@gmail.com>
Date: Sun, 9 Nov 2025 23:24:10 +0100
Subject: [PATCH] Refactor tab group component to improve content rendering and
 layout

---
 .../src/app/components/list/list.component.ts |  2 --
 .../tab-group/tab-group.component.html        |  4 +--
 .../tab-group/tab-group.component.scss        |  3 ++
 .../tab-group/tab-group.component.ts          | 28 +++++++++----------
 4 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/angular/frontend/src/app/components/list/list.component.ts b/src/angular/frontend/src/app/components/list/list.component.ts
index 259baf9..4f987c2 100644
--- a/src/angular/frontend/src/app/components/list/list.component.ts
+++ b/src/angular/frontend/src/app/components/list/list.component.ts
@@ -1,5 +1,4 @@
 import {Component, input, TemplateRef} from '@angular/core';
-import {PanelComponent} from '../panel/panel.component';
 import {NgTemplateOutlet} from '@angular/common';
 
 export interface Identifiable {
@@ -9,7 +8,6 @@ export interface Identifiable {
 @Component({
   selector: 'app-list',
   imports: [
-    PanelComponent,
     NgTemplateOutlet
   ],
   templateUrl: './list.component.html',
diff --git a/src/angular/frontend/src/app/components/tab-group/tab-group.component.html b/src/angular/frontend/src/app/components/tab-group/tab-group.component.html
index 8ea8ef7..ec1e233 100644
--- a/src/angular/frontend/src/app/components/tab-group/tab-group.component.html
+++ b/src/angular/frontend/src/app/components/tab-group/tab-group.component.html
@@ -9,6 +9,4 @@
     </button>
   }
 </div>
-<div class="tab-content">
-  <ng-content></ng-content>
-</div>
+<div #tabContent class="tab-content"></div>
diff --git a/src/angular/frontend/src/app/components/tab-group/tab-group.component.scss b/src/angular/frontend/src/app/components/tab-group/tab-group.component.scss
index 77b376f..5905658 100644
--- a/src/angular/frontend/src/app/components/tab-group/tab-group.component.scss
+++ b/src/angular/frontend/src/app/components/tab-group/tab-group.component.scss
@@ -2,6 +2,9 @@
 
   .tab-content {
     margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
 
   .tabs {
diff --git a/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts b/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts
index 050456b..6aacac7 100644
--- a/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts
+++ b/src/angular/frontend/src/app/components/tab-group/tab-group.component.ts
@@ -1,13 +1,4 @@
-import {
-  AfterViewInit,
-  Component,
-  ContentChildren,
-  input,
-  model,
-  OnInit, output,
-  QueryList,
-  ViewContainerRef
-} from '@angular/core';
+import {AfterViewInit, Component, ContentChildren, ElementRef, EmbeddedViewRef, input, model, OnInit, output, QueryList, ViewChild, ViewContainerRef} from '@angular/core';
 import {NgClass} from '@angular/common';
 import {ActiveTabDirective} from './active-tab.directive';
 import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';
@@ -31,8 +22,10 @@ export class TabGroupComponent implements OnInit, AfterViewInit {
   public tabs = input.required<TabGroup[]>();
   public activeTabId = model<string | null>();
   public tabChanged = output<TabGroup>();
+  private activeView?: EmbeddedViewRef<any>;
 
   @ContentChildren(ActiveTabDirective) tabTemplates!: QueryList<ActiveTabDirective>;
+  @ViewChild('tabContent', { static: false }) tabContentElementRef?: ElementRef;
 
   constructor(private vcr: ViewContainerRef) {
 
@@ -71,13 +64,20 @@ export class TabGroupComponent implements OnInit, AfterViewInit {
 
     if (!this.tabTemplates) return;
 
-    this.vcr.clear();
-
     const tab = this.tabTemplates.find(t => t.tabId() === this.activeTabId());
 
-    if (tab) {
+    if (tab && this.tabContentElementRef) {
+      if (this.activeView) {
+        this.activeView.destroy();
+        this.tabContentElementRef.nativeElement.innerHTML = '';
+      }
+
       const tabOption = this.tabs().find(x => x.id == id);
-      this.vcr.createEmbeddedView(tab.template, {$implicit: tabOption});
+      this.activeView = this.vcr.createEmbeddedView(tab.template, {$implicit: tabOption});
+
+      this.activeView.rootNodes.forEach(x => {
+        this.tabContentElementRef!.nativeElement.appendChild(x)
+      });
     }
   }
 }