Refactor tab group component to improve content rendering and layout

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',

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>

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 {

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)
+      });
     }
   }
 }