Fixed brittle scrollToTop functions in Stats and PostAnalytics (#25671)

ref https://linear.app/ghost/issue/BER-2999/
ref #25583
ref #25501

## Problem
- the [recently introduced](#25583) `scrollToTop` functions use a brittle approach of assuming the first element found with an `overflow-y-scroll` class is the main scrollable content area
- in the React admin shell we were re-working the overall app layout to accommodate alert bars and reduce the number of scrollable elements, this resulted in the removal of the `overflow-y-scroll` class on the main content area breaking these functions

## Fix
- pulled the `getScrollParent` utility out of the posts `virtual-table` components into a re-usable Shade utility (`@tryghost/shade/utils`), and pointed its existing consumers at it
- added container refs to both Stats and PostAnalytics layout components so an element is available from which to find the scrollable parent
- updated the `scrollToTop` functions to use `getScrollParent` with the container ref so no matter what classes get used we're always scrolling the right parent scroll container

Author: kevinansfield

apps/posts/src/components/virtual-table/get-scroll-parent.tsx

@@ -1,4 +1,4 @@
-import {getScrollParent} from './get-scroll-parent';
+import {getScrollParent} from '@tryghost/shade/utils';
 import {useEffect} from 'react';
 import {useVirtualizer} from '@tanstack/react-virtual';
 

apps/posts/src/components/virtual-table/use-infinite-virtual-scroll.tsx

@@ -1,4 +1,4 @@
-import {getScrollParent} from './get-scroll-parent';
+import {getScrollParent} from '@tryghost/shade/utils';
 import {useEffect, useRef, useState} from 'react';
 import {useLocation} from '@tryghost/admin-x-framework';
 

apps/posts/src/components/virtual-table/use-scroll-restoration.tsx

@@ -8,13 +8,13 @@ import StatsFilter from '../components/stats-filter';
 import {BarChartLoadingIndicator, Card, CardContent, EmptyIndicator, NavbarActions} from '@tryghost/shade/components';
 import {BaseSourceData, useNavigate, useParams, useTinybirdQuery} from '@tryghost/admin-x-framework';
 import {KpiDataItem, getWebKpiValues} from '@src/utils/kpi-helpers';
-import {LucideIcon} from '@tryghost/shade/utils';
+import {LucideIcon, getScrollParent} from '@tryghost/shade/utils';
 import {STATS_RANGES, UNKNOWN_LOCATION_VALUES} from '@src/utils/constants';
 import {createFilter} from '@tryghost/shade/patterns';
 import {formatQueryDate, getRangeDates, getRangeForStartDate} from '@tryghost/shade/app';
 import {getAudienceFromFilterValues, getAudienceQueryParam} from '@src/utils/audience';
 import {getPeriodText} from '@src/utils/chart-helpers';
-import {useCallback, useEffect, useMemo} from 'react';
+import {useCallback, useEffect, useMemo, useRef} from 'react';
 import {useFilterParams} from '@src/hooks/use-filter-params';
 import {useGlobalData} from '@src/providers/post-analytics-context';
 
@@ -31,6 +31,7 @@ const Web: React.FC<postAnalyticsProps> = () => {
     const navigate = useNavigate();
     const {postId} = useParams();
     const {statsConfig, isLoading: isConfigLoading, range, data: globalData, post, isPostLoading} = useGlobalData();
+    const containerRef = useRef<HTMLElement>(null);
 
     // Use URL-synced filter state for bookmarking and sharing
     const {filters: analyticsFilters, setFilters: setAnalyticsFilters} = useFilterParams();
@@ -64,7 +65,7 @@ const Web: React.FC<postAnalyticsProps> = () => {
 
     // Scroll to top of the scrollable container
     const scrollToTop = useCallback(() => {
-        const scrollContainer = document.querySelector('.overflow-y-scroll');
+        const scrollContainer = getScrollParent(containerRef.current);
         if (scrollContainer) {
             scrollContainer.scrollTo({top: 0, behavior: 'smooth'});
         }
@@ -224,7 +225,7 @@ const Web: React.FC<postAnalyticsProps> = () => {
                     {!hasFilters && <DateRangeSelect />}
                 </NavbarActions>
             </PostAnalyticsHeader>
-            <PostAnalyticsContent>
+            <PostAnalyticsContent ref={containerRef}>
                 {isPageLoading ?
                     <Card className='size-full' variant='plain'>
                         <CardContent className='size-full items-center justify-center'>

apps/posts/src/views/PostAnalytics/Web/web.tsx

@@ -1,12 +1,16 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
 import {cn} from '@tryghost/shade/utils';
 
-const PostAnalyticsContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({children, className, ...props}) => {
-    return (
-        <section className={cn('flex gap-6 flex-col py-8 size-full grow', className)} {...props}>
-            {children}
-        </section>
-    );
-};
+const PostAnalyticsContent = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+    ({children, className, ...props}, ref) => {
+        return (
+            <section ref={ref} className={cn('flex gap-6 flex-col py-8 size-full grow', className)} {...props}>
+                {children}
+            </section>
+        );
+    }
+);
+
+PostAnalyticsContent.displayName = 'PostAnalyticsContent';
 
 export default PostAnalyticsContent;

apps/posts/src/views/PostAnalytics/components/post-analytics-content.tsx

@@ -36,6 +36,24 @@ export function debounce<T extends unknown[]>(func: (...args: T) => void, wait:
     };
 }
 
+// Helper to find scroll parent of element
+export function getScrollParent(node: Node | null): HTMLElement | null {
+    if (!node) {
+        return null;
+    }
+
+    if (node instanceof HTMLElement) {
+        const overflowY = window.getComputedStyle(node).overflowY;
+        const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
+
+        if (isScrollable && node.scrollHeight >= node.clientHeight) {
+            return node;
+        }
+    }
+
+    return getScrollParent(node.parentNode) || document.body;
+}
+
 /* Data formatters
 /* -------------------------------------------------------------------------- */
 

apps/shade/src/lib/ds-utils.ts

@@ -8,6 +8,7 @@ export {useSimplePagination} from './hooks/use-simple-pagination';
 export {
     cn,
     debounce,
+    getScrollParent,
     kebabToPascalCase,
     formatTimestamp,
     formatNumber,

apps/shade/src/utils.ts

@@ -1,6 +1,6 @@
 import DateRangeSelect from '../components/date-range-select';
 import LocationsCard from '../Locations/components/locations-card';
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useRef} from 'react';
 import SourcesCard from './components/sources-card';
 import StatsFilter from '../components/stats-filter';
 import StatsHeader from '../layout/stats-header';
@@ -13,7 +13,7 @@ import {KpiMetric} from '@src/types/kpi';
 import {Navigate, useAppContext, useTinybirdQuery} from '@tryghost/admin-x-framework';
 import {STATS_DEFAULT_SOURCE_ICON_URL} from '@src/utils/constants';
 import {createFilter} from '@tryghost/shade/patterns';
-import {formatDuration, formatNumber, formatPercentage} from '@tryghost/shade/utils';
+import {formatDuration, formatNumber, formatPercentage, getScrollParent} from '@tryghost/shade/utils';
 import {formatQueryDate, getRangeDates} from '@tryghost/shade/app';
 import {getAudienceFromFilterValues, getAudienceQueryParam} from '@src/utils/audience';
 import {useFilterParams} from '@hooks/use-filter-params';
@@ -58,6 +58,8 @@ const Web: React.FC = () => {
     const {startDate, endDate, timezone} = getRangeDates(range);
     const {appSettings} = useAppContext();
 
+    const containerRef = useRef<HTMLDivElement>(null);
+
     // Use URL-synced filter state for bookmarking and sharing
     const {filters: analyticsFilters, setFilters: setAnalyticsFilters} = useFilterParams();
 
@@ -73,7 +75,7 @@ const Web: React.FC = () => {
 
     // Scroll to top of the scrollable container
     const scrollToTop = useCallback(() => {
-        const scrollContainer = document.querySelector('.overflow-y-scroll');
+        const scrollContainer = getScrollParent(containerRef.current);
         if (scrollContainer) {
             scrollContainer.scrollTo({top: 0, behavior: 'smooth'});
         }
@@ -186,7 +188,7 @@ const Web: React.FC = () => {
     const hasFilters = analyticsFilters.length > 0;
 
     return (
-        <StatsLayout>
+        <StatsLayout ref={containerRef}>
             <StatsHeader>
                 {hasFilters &&
                 <NavbarActions>

apps/stats/src/views/Stats/Web/web.tsx

@@ -1,16 +1,20 @@
 import MainLayout from '@src/components/layout';
-import React from 'react';
+import React, {forwardRef} from 'react';
 
-const StatsLayout: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({children}) => {
-    return (
-        <MainLayout>
-            <div className='grid w-full grow'>
-                <div className='flex h-full flex-col px-6'>
-                    {children}
+const StatsLayout = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({children}, ref) => {
+        return (
+            <MainLayout>
+                <div ref={ref} className='grid w-full grow'>
+                    <div className='flex h-full flex-col px-6'>
+                        {children}
+                    </div>
                 </div>
-            </div>
-        </MainLayout>
-    );
-};
+            </MainLayout>
+        );
+    }
+);
+
+StatsLayout.displayName = 'StatsLayout';
 
 export default StatsLayout;