From f109b97ddda9f0188f7f88c8d8add16bc7a68afe Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 26 Feb 2026 23:35:21 +0100
Subject: [PATCH] Fix CSS stacking context issue in actions log (#36749)

`ansi_up` sets `opacity:.7` on faint text which causes a CSS stacking
context to be created that results in all "faint" elements rendering
above the header:

<img width="889" height="102" alt="Screenshot 2026-02-25 at 16 42 57"
src="https://github.com/user-attachments/assets/2602ba88-e7e5-4d09-8f29-4ca6c0297ebc"
/>

Fix it by adding a z-index to the header so it also has its own stacking
context and renders above:

<img width="890" height="94" alt="Screenshot 2026-02-25 at 16 42 41"
src="https://github.com/user-attachments/assets/760f99a8-e230-4022-8213-e88c16831850"
/>
---
 web_src/js/components/RepoActionView.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 4a8da7b11d..b6bb52b3eb 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -945,6 +945,9 @@ export default defineComponent({
   background-color: var(--color-console-active-bg);
   position: sticky;
   top: 60px;
+  /* workaround ansi_up issue related to faintStyle generating a CSS stacking context via `opacity`
+     inline style which caused such elements to render above the .job-step-summary header. */
+  z-index: 1;
 }
 
 @media (max-width: 767.98px) {