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"
/>
This commit is contained in:
silverwind
2026-02-26 23:35:21 +01:00
committed by GitHub
parent f9a2a8ae8d
commit f109b97ddd

View File

@@ -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) {