riyadhafraa
b87f9224a7
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.