Notes: lift top bar out of the scroll area so it never scrolls off

Task #452. After #451, the page wrapper was h-screen + overflow-y-auto
with the header still using `sticky top-0 z-20`. Users kept reporting
that the bar slides up out of view on scroll — the well-known
`position: sticky` failure mode when the sticky child is a direct flex
item of the same element that is also the scroll container.

Restructured artifacts/tx-os/src/pages/notes.tsx so the bar is a
sibling of the scroller, not inside it:

- Page wrapper: `h-screen os-bg flex flex-col overflow-hidden`
  (was `... overflow-y-auto`). The wrapper itself never scrolls.
- Header div: dropped `sticky top-0 z-20`, added `shrink-0`. As a
  non-shrinking flex child of the column wrapper it stays pinned at
  the top by layout, with no sticky math involved.
- Wrapped the composer block and the main content row
  (`flex-1 px-4 py-6 max-w-6xl ... flex gap-6` plus its inner
  `flex-1 min-w-0` column) inside a single new scrolling region:
  `<div className="flex-1 min-h-0 overflow-y-auto flex flex-col">`.
  `min-h-0` is required so the flex child can shrink below its
  content height and let `overflow-y-auto` actually engage.
- Dialogs (Edit, Labels, Send, FolderShare, Thread) remain siblings
  of the scroller, so popovers/modals are unaffected.

No changes to index.css, header styling, composer styling, folder
layout, or any other page. RTL/LTR behavior unchanged.

Out of scope: pre-existing test failures (executive-meetings,
notes-share, service-orders) are unrelated to this layout fix.
This commit is contained in:
Riyadh
2026-05-10 09:44:44 +00:00
parent c8d7c98dd4
commit e88c00b19e
+4 -2
View File
@@ -304,11 +304,11 @@ export default function NotesPage() {
return (
<div
className="h-screen os-bg flex flex-col overflow-y-auto"
className="h-screen os-bg flex flex-col overflow-hidden"
dir={isRtl ? "rtl" : "ltr"}
data-testid="notes-page"
>
<div className="glass-panel border-b border-slate-200/70 px-4 py-3 sticky top-0 z-20">
<div className="glass-panel border-b border-slate-200/70 px-4 py-3 shrink-0">
<div className="flex items-center gap-3 flex-wrap">
<button
onClick={() => setLocation("/")}
@@ -463,6 +463,7 @@ export default function NotesPage() {
</div>
</div>
<div className="flex-1 min-h-0 overflow-y-auto flex flex-col">
{showTopComposer && (
<div
className="px-4 pt-1 max-w-6xl w-full mx-auto"
@@ -598,6 +599,7 @@ export default function NotesPage() {
)}
</div>
</div>
</div>
{editing && (
<EditNoteDialog