User report: in the admin dashboard on iPad, the top bar (back arrow,
gear icon, "لوحة التحكم" title, mobile menu button) felt like it
detached from the top during scroll — content showed through it and
it didn't look pinned.
Root cause (artifacts/tx-os/src/pages/admin.tsx, line 1148):
the header was `glass-panel ... sticky top-0 z-10`. The `glass-panel`
background is rgba(255,255,255,0.7) — semi-transparent — and z-10 is
low enough that floating elements on the page (os-bg blobs, sidebar
backdrop) bled across it. The sticky positioning itself was correct;
the perception of "not pinned" came from the see-through background.
Fix (single-file CSS-only change, exactly as planned):
- Drop `glass-panel`, replace with inline styles for full control.
- Background: rgba(255,255,255,0.96) — visually opaque so scrolled
content no longer shows through.
- Keep blur(16px) saturate(160%) (with -webkit- prefix) so the bar
still has the same soft glass aesthetic.
- z-30 instead of z-10 so nothing in the page overlays it. Modals
use z-50 so they still cover the bar correctly.
- Add boxShadow 0 4px 20px rgba(15,23,42,0.06) so the bar visibly
floats above content once scrolling starts.
- Kept `sticky top-0` (not converted to fixed) so the desktop
sidebar's `top-[73px]` offset still aligns with the bar's bottom.
- Header height unchanged (px-4 py-4 + same children).
No layout changes. No other top bars touched (out of scope).
Existing tx-os tests are unaffected (no logic, only presentation).
riyadhafraa
9a07018314