diff --git a/commafeed-client/src/app/constants.ts b/commafeed-client/src/app/constants.ts index 5d3c9c68..d81f6960 100644 --- a/commafeed-client/src/app/constants.ts +++ b/commafeed-client/src/app/constants.ts @@ -89,10 +89,14 @@ export const Constants = { mobileBreakpointName: "md", headerHeight: 60, entryMaxWidth: 650, - isTopVisible: (div: HTMLElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight, + isTopVisible: (div: HTMLElement) => { + const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect() + return div.getBoundingClientRect().top >= (header?.bottom ?? 0) + }, isBottomVisible: (div: HTMLElement) => div.getBoundingClientRect().bottom <= window.innerHeight, }, dom: { + headerId: "header", entryId: (entry: Entry) => `entry-id-${entry.id}`, entryContextMenuId: (entry: Entry) => entry.id, }, diff --git a/commafeed-client/src/app/entries/thunks.ts b/commafeed-client/src/app/entries/thunks.ts index d9e3a38c..2a4e3744 100644 --- a/commafeed-client/src/app/entries/thunks.ts +++ b/commafeed-client/src/app/entries/thunks.ts @@ -174,10 +174,11 @@ export const selectEntry = createAppAsyncThunk( } ) const scrollToEntry = (entryElement: HTMLElement, scrollSpeed: number | undefined, onScrollEnded: () => void) => { + const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect() + const offset = (header?.bottom ?? 0) + 3 scrollToWithCallback({ options: { - // add a small gap between the top of the content and the top of the page - top: entryElement.offsetTop - Constants.layout.headerHeight - 3, + top: entryElement.offsetTop - offset, behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto", }, onScrollEnded, diff --git a/commafeed-client/src/pages/app/Layout.tsx b/commafeed-client/src/pages/app/Layout.tsx index 35fecb25..384e4dde 100644 --- a/commafeed-client/src/pages/app/Layout.tsx +++ b/commafeed-client/src/pages/app/Layout.tsx @@ -133,7 +133,7 @@ export default function Layout(props: LayoutProps) { }} padding={{ base: 6, [Constants.layout.mobileBreakpointName]: "md" }} > - + {mobileMenuOpen && (