Task #448: remove gap under Notes header by switching back to sticky

Task #446 made the Notes header `position: fixed` and added an
aria-hidden spacer below it sized to the header's measured height
(via ResizeObserver). The spacer was exactly the "big empty band"
the user kept seeing between the header bar and the
"اكتب ملاحظة..." composer — the page background gradient showed
through the reserved space.

Switched the header back to `sticky top-0 z-20`. Sticky keeps it
pinned to the top of the viewport while the page scrolls, but it
stays in document flow, so the composer renders immediately under
the bar with no artificial gap. Removed the now-unused
`headerRef`, `headerHeight` state, ResizeObserver effect, and the
spacer div. Bumped composer wrapper padding from `pt-1` back to
`pt-3` for a small breathing space (no longer competing with the
spacer).

No other changes; folders rail, composer behavior, RTL/LTR all
untouched.
This commit is contained in:
Riyadh
2026-05-10 07:34:00 +00:00
parent 7507ae4d21
commit 3fe24be673
+1 -1
View File
@@ -465,7 +465,7 @@ export default function NotesPage() {
{showTopComposer && (
<div
className="px-4 pt-3 max-w-6xl w-full mx-auto"
className="px-4 pt-1 max-w-6xl w-full mx-auto"
data-testid="notes-top-composer"
>
<Composer