Task #449: make Notes header truly stick by fixing scroll-context bug

After Task #448 switched the Notes header to `sticky top-0`, it
still scrolled away with the page. Root cause was in
`artifacts/tx-os/src/index.css`: the shared `.os-bg` class set
`overflow-x: hidden`, which per CSS spec turns the element into a
scroll container. Since the Notes page wrapper carries `os-bg` and
also has `min-h-screen`, the wrapper expanded to fit content
(never scrolled internally) while the document body scrolled —
which meant the sticky header was scoped to a non-scrolling
container and rode along with the page.

Fix:
- Removed `overflow-x: hidden` from `.os-bg`.
- Added `html, body { overflow-x: hidden; }` inside the existing
  `@layer base` block so the horizontal-clip protection still
  exists at the document level (which does not break sticky in
  descendants).

No other changes. Notes page header now actually pins to the top
during scroll across all tabs / folder views, and other pages that
use `.os-bg` (home, services, executive-meetings, etc.) keep their
horizontal-overflow protection via the body-level rule.
This commit is contained in:
riyadhafraa
2026-05-10 08:56:17 +00:00
parent 0f049445f2
commit 09cc87d510
+4 -1
View File
@@ -114,6 +114,10 @@
@apply font-sans antialiased text-foreground;
background-color: #F8FAFC;
}
html,
body {
overflow-x: hidden;
}
}
/* Soft glassmorphism — light, very subtle blur */
@@ -129,7 +133,6 @@
.os-bg {
position: relative;
background-color: #F8FAFC;
overflow-x: hidden;
}
.os-bg::before,