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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user