From 0c1436aba8dc0509e381cdf920bc0ac3d1fb8136 Mon Sep 17 00:00:00 2001
From: master <>
Date: Fri, 27 Mar 2026 18:31:43 +0200
Subject: [PATCH] Fix tab content projection on Deployments and Releases pages

Both pages used self-closing <stella-page-tabs ... /> with content rendered
as sibling elements OUTSIDE the component. This caused an empty tabpanel
with content floating below on the page background.

Fix: wrap tab-conditional content INSIDE <stella-page-tabs>...</stella-page-tabs>
so it projects into the tabpanel slot. Now the tab bar and its content share
the same visual container with the correct border and background.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/app/features/releases/releases-activity.component.ts   | 2 +-
 .../app/features/releases/releases-unified-page.component.ts   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Web/StellaOps.Web/src/app/features/releases/releases-activity.component.ts b/src/Web/StellaOps.Web/src/app/features/releases/releases-activity.component.ts
index 8efb64d2a..1a2ed83c0 100644
--- a/src/Web/StellaOps.Web/src/app/features/releases/releases-activity.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/releases/releases-activity.component.ts
@@ -170,7 +170,6 @@ function deriveOutcomeIcon(status: string): string {
         ariaLabel="Run list views"
       >
         <app-page-action-outlet tabBarAction />
-      </stella-page-tabs>
 
       @if (viewMode() === 'approvals') {
         <!-- Approvals tab content -->
@@ -299,6 +298,7 @@ function deriveOutcomeIcon(status: string): string {
           }
         }
       }
+      </stella-page-tabs>
     </section>
   `,
   styles: [`
diff --git a/src/Web/StellaOps.Web/src/app/features/releases/releases-unified-page.component.ts b/src/Web/StellaOps.Web/src/app/features/releases/releases-unified-page.component.ts
index f09cb37a1..56e673c8a 100644
--- a/src/Web/StellaOps.Web/src/app/features/releases/releases-unified-page.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/releases/releases-unified-page.component.ts
@@ -81,7 +81,7 @@ export interface PipelineRelease {
       </header>
 
       <stella-page-tabs [tabs]="releaseTabs" [activeTab]="activeTab()" urlParam="tab"
-        (tabChange)="activeTab.set($event)" ariaLabel="Releases tabs" />
+        (tabChange)="activeTab.set($event)" ariaLabel="Releases tabs">
 
       @if (activeTab() === 'releases') {
       <!-- Pipeline -->
@@ -265,6 +265,7 @@ export interface PipelineRelease {
       @if (activeTab() === 'versions') {
         <app-release-list [embedded]="true" />
       }
+      </stella-page-tabs>
 
       <app-confirm-dialog #approveConfirm
         title="Approve Release"