diff --git a/commafeed-client/src/app/constants.ts b/commafeed-client/src/app/constants.ts index aa2541a8..5b335b40 100644 --- a/commafeed-client/src/app/constants.ts +++ b/commafeed-client/src/app/constants.ts @@ -8,6 +8,8 @@ export const Constants = { mobileBreakpoint: DEFAULT_THEME.breakpoints.md, headerHeight: 60, sidebarWidth: 350, + isTopVisible: (div: HTMLDivElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight, + isBottomVisible: (div: HTMLDivElement) => div.getBoundingClientRect().bottom <= window.innerHeight, }, dom: { mainScrollAreaId: "main-scroll-area-id", diff --git a/commafeed-client/src/components/content/FeedEntries.tsx b/commafeed-client/src/components/content/FeedEntries.tsx index f77b7b2e..de4d479d 100644 --- a/commafeed-client/src/components/content/FeedEntries.tsx +++ b/commafeed-client/src/components/content/FeedEntries.tsx @@ -52,8 +52,7 @@ export function FeedEntries() { if (selectedEntry) { if (selectedEntry.expanded) { const ref = refs.current[selectedEntry.id] - const bottomVisible = ref.getBoundingClientRect().bottom <= window.innerHeight - if (bottomVisible) { + if (Constants.layout.isBottomVisible(ref)) { dispatch(selectNextEntry()) } else { const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId) @@ -73,8 +72,7 @@ export function FeedEntries() { if (selectedEntry) { if (selectedEntry.expanded) { const ref = refs.current[selectedEntry.id] - const topVisible = ref.getBoundingClientRect().top >= Constants.layout.headerHeight - if (topVisible) { + if (Constants.layout.isTopVisible(ref)) { dispatch(selectPreviousEntry()) } else { const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId) diff --git a/commafeed-client/src/components/content/FeedEntry.tsx b/commafeed-client/src/components/content/FeedEntry.tsx index 72d0ae08..ddb8e9a6 100644 --- a/commafeed-client/src/components/content/FeedEntry.tsx +++ b/commafeed-client/src/components/content/FeedEntry.tsx @@ -58,6 +58,7 @@ export function FeedEntry(props: FeedEntryProps) { setTimeout(() => { if (!ref.current) return if (!props.expanded) return + if (Constants.layout.isTopVisible(ref.current) && Constants.layout.isBottomVisible(ref.current)) return document.getElementById(Constants.dom.mainScrollAreaId)?.scrollTo({ // having a small gap between the top of the content and the top of the page is sexier