fix: move Suspense boundaries to per-chart to prevent React hideInstance scroll collapse

React's Suspense hideInstance sets display:none!important on the entire
chartStack div during concurrent transitions, collapsing body height and
clamping scroll to 0. Moving Suspense inside each LazyChart/chart surface
scopes this behavior to individual chart containers.

Author: austenstone

src/components/ReportPageLayout.tsx

@@ -585,13 +585,14 @@ export function ReportPageLayout({ schema, allowedReportTypes, metricOptions }:
               || activeReport?.type === REPORT_TYPES.COPILOT_SEAT_ACTIVITY
               || activeReport?.type === REPORT_TYPES.ENTERPRISE_MEMBERS;
             return (
-              <Suspense fallback={null}>
-              {/* Use visibility:hidden (not display:none) during transient empty states
-                  so the chart DOM keeps its layout height and scroll position is preserved. */}
+              /* No outer Suspense here — each LazyChart has its own Suspense boundary
+                 so React's hideInstance only affects individual charts, not the entire stack. */
               <div className={styles.chartStack} key={activeReportIndex} style={hasData ? undefined : { visibility: 'hidden' }}>
                 {!isFlatReport && (
                   <div className={styles.chartSurface}>
-                    <TimeSeriesChart metricOptions={chartMetricOptions} />
+                    <Suspense fallback={null}>
+                      <TimeSeriesChart metricOptions={chartMetricOptions} />
+                    </Suspense>
                   </div>
                 )}
                 <LazyChart className={styles.chartSurface}>
@@ -606,7 +607,6 @@ export function ReportPageLayout({ schema, allowedReportTypes, metricOptions }:
                   <SankeyChart hierarchy={schema.sankeyHierarchy} metric={activeMetric} />
                 </LazyChart>
               </div>
-              </Suspense>
             );
           })()}
 

src/components/charts/LazyChart.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import { Suspense, useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
 
 interface LazyChartProps {
   children: ReactNode;
@@ -59,7 +59,7 @@ export function LazyChart({ children, className, minHeight = 400 }: LazyChartPro
       className={className}
       style={{ minHeight, contain: visible ? undefined : 'content' }}
     >
-      {visible ? children : null}
+      {visible ? <Suspense fallback={null}>{children}</Suspense> : null}
     </div>
   );
 }