scroll to the correct position regardless of the position or height of the header

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,
     },

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 - offset,
-            top: entryElement.offsetTop - Constants.layout.headerHeight - 3,
             behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto",
         },
         onScrollEnded,

commafeed-client/src/pages/app/Layout.tsx

@@ -133,7 +133,7 @@ export default function Layout(props: LayoutProps) {
                 }}
                 padding={{ base: 6, [Constants.layout.mobileBreakpointName]: "md" }}
             >
-                <AppShell.Header id="header">
+                <AppShell.Header id={Constants.dom.headerId}>
                     <OnMobile>
                         {mobileMenuOpen && (
                             <Group justify="space-between" p="md">