fix(site): make settings and analytics headers scrollable in Safari PWA (#23742)

site/src/pages/AgentsPage/AgentAnalyticsPage.tsx

@@ -2,6 +2,7 @@ import dayjs, { type Dayjs } from "dayjs";
 import { type FC, useState } from "react";
 import { useQuery } from "react-query";
 import { chatCostSummary } from "#/api/queries/chats";
+import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import { useAuthContext } from "#/contexts/auth/AuthProvider";
 import { AgentAnalyticsPageView } from "./AgentAnalyticsPageView";
 import { AgentPageHeader } from "./components/AgentPageHeader";
@@ -35,7 +36,7 @@ const AgentAnalyticsPage: FC<AgentAnalyticsPageProps> = ({ now }) => {
 	});
 
 	return (
-		<>
+		<ScrollArea className="min-h-0 flex-1" viewportClassName="[&>div]:!block">
 			<AgentPageHeader mobileBack={{ to: "/agents", label: "Agents" }} />
 			<AgentAnalyticsPageView
 				summary={summaryQuery.data}
@@ -44,7 +45,7 @@ const AgentAnalyticsPage: FC<AgentAnalyticsPageProps> = ({ now }) => {
 				onRetry={() => void summaryQuery.refetch()}
 				rangeLabel={dateRange.rangeLabel}
 			/>
-		</>
+		</ScrollArea>
 	);
 };
 

site/src/pages/AgentsPage/AgentAnalyticsPageView.tsx

@@ -20,7 +20,7 @@ export const AgentAnalyticsPageView: FC<AgentAnalyticsPageViewProps> = ({
 	rangeLabel,
 }) => {
 	return (
-		<div className="flex min-h-0 flex-1 flex-col overflow-y-auto p-4 pt-8 [scrollbar-width:thin] [scrollbar-color:hsl(var(--surface-quaternary))_transparent]">
+		<div className="flex flex-col p-4 pt-8">
 			<div className="mx-auto w-full max-w-3xl">
 				<SectionHeader
 					label="Analytics"

site/src/pages/AgentsPage/AgentSettingsPage.tsx

@@ -1,5 +1,6 @@
 import type { FC } from "react";
 import { Outlet, useLocation } from "react-router";
+import { ScrollArea } from "#/components/ScrollArea/ScrollArea";
 import { AgentPageHeader } from "./components/AgentPageHeader";
 
 const AgentSettingsPage: FC = () => {
@@ -8,18 +9,18 @@ const AgentSettingsPage: FC = () => {
 	const section = match?.[1];
 
 	return (
-		<>
+		<ScrollArea className="min-h-0 flex-1" viewportClassName="[&>div]:!block">
 			<AgentPageHeader
 				mobileBack={
 					section ? { to: "/agents/settings", label: "Settings" } : undefined
 				}
 			/>
-			<div className="flex min-h-0 flex-1 flex-col overflow-y-auto p-4 pt-8 [scrollbar-width:thin] [scrollbar-color:hsl(var(--surface-quaternary))_transparent]">
+			<div className="p-4 pt-8">
 				<div className="mx-auto w-full max-w-3xl">
 					<Outlet />
 				</div>
 			</div>
-		</>
+		</ScrollArea>
 	);
 };