diff --git a/src/screens/PostThread/index.tsx b/src/screens/PostThread/index.tsx index a4f94851ad..b9cb5a95c9 100644 --- a/src/screens/PostThread/index.tsx +++ b/src/screens/PostThread/index.tsx @@ -481,6 +481,11 @@ export function PostThread({uri}: {uri: string}) { ], ) + const footerHeight = useMemo( + () => Math.max(180, windowHeight - 200 - thread.state.replyCount * 100), + [windowHeight, thread.state.replyCount], + ) + return ( <> @@ -532,13 +537,14 @@ export function PostThread({uri}: {uri: string}) { * account for the `on*ReachedThreshold` values. * * Otherwise, and on web, this value needs to be the height of - * the viewport _minus_ a sensible min-post height e.g. 200, so - * that there's enough scroll remaining to get the anchor post - * back to the top of the screen when handling scroll. + * the viewport _minus_ a sensible min-post height e.g. 200 plus + * 100 per reply, so that there's enough scroll remaining to get the + * anchor post back to the top of the screen when handling scroll, + * while trying to minimize the height if there's enough replies. */ height={platform({ - web: windowHeight - 200, - default: deferParents ? windowHeight * 2 : windowHeight - 200, + web: footerHeight, + default: deferParents ? windowHeight * 2 : footerHeight, })} style={isTombstoneView ? {borderTopWidth: 0} : undefined} /> diff --git a/src/state/queries/usePostThread/index.ts b/src/state/queries/usePostThread/index.ts index 782888cfbe..6e1478ae0a 100644 --- a/src/state/queries/usePostThread/index.ts +++ b/src/state/queries/usePostThread/index.ts @@ -277,6 +277,18 @@ export function usePostThread({anchor}: {anchor?: string}) { setOtherItemsVisible, ]) + /* + * Count the number of posts beneath the anchor + */ + const replyCount = useMemo(() => { + return items.reduce((acc, item) => { + if (item.type === 'threadPost' && item.depth > 0) { + return acc + 1 + } + return acc + }, 0) + }, [items]) + return useMemo( () => ({ state: { @@ -292,6 +304,7 @@ export function usePostThread({anchor}: {anchor?: string}) { sort, view, otherItemsVisible, + replyCount, }, data: { items, @@ -320,6 +333,7 @@ export function usePostThread({anchor}: {anchor?: string}) { setView, threadgate, items, + replyCount, ], ) }