Task #507: Stop .os-bg from overriding sticky on its direct children

rafraa/TX

User report: after #505 the admin "لوحة التحكم" header looked pinned
at the top of the page, but disappeared as soon as the user scrolled
down. Same bug silently affected every page wrapped in `.os-bg`.

Root cause (artifacts/tx-os/src/index.css, lines 190-193):

  .os-bg > * { position: relative; z-index: 1; }

This rule was meant to lift page content above the decorative
gradient blobs (`.os-bg::before/::after`, position:fixed z-index:0).
But by setting `position: relative` on every direct child it also
overrode any `position: sticky` declared via Tailwind utilities on
those children — equal-specificity class selectors, with index.css
loaded after Tailwind utilities, so .os-bg won source-order. The
"sticky" headers therefore behaved as plain in-flow elements and
scrolled away with the rest of the content.

Fix (one CSS rule):
- Replace `position: relative; z-index: 1` with `isolation: isolate`.
- `isolation: isolate` creates a new stacking context (so children
  still paint above the z-index:0 blobs) without forcing them to
  position:relative — sticky/fixed children now work as written.

No markup changes anywhere. Followed Option A in the task plan
exactly. Implication: every sticky header across the app (admin,
home, chat, services, notifications) is now actually pinned on
scroll. Decorative blobs continue to sit behind page content
because the new stacking context still paints over the parent's
z-index 0 background layer.

No tests were modified; existing tx-os tests are presentation-
agnostic and unaffected.

This commit is contained in:

riyadhafraa

2026-05-12 09:06:24 +00:00

parent 3d346ed1b1

commit b87f9224a7

1 changed files with 7 additions and 2 deletions

									
										artifacts/tx-os/src/index.css
									
		+7
		-2
	
												View File
												
				@@ -188,8 +188,13 @@

				}

				.os-bg > * {

				  position: relative;

				  z-index: 1;

				  /* Was: position: relative; z-index: 1;

				     `position: relative` was overriding `position: sticky` (and `fixed`)

				     on direct children, so sticky headers detached on scroll. Use

				     `isolation: isolate` to create a stacking context that lifts

				     children above the floating ::before / ::after blobs WITHOUT

				     forcing them to position:relative. */

				  isolation: isolate;

				}

				@keyframes blobFloat {