fix: dashboard flickering on poll, animation replay, and scroll

- Add placeholderData to useRouteMetrics and usePunchcard hooks so data
  stays stable between refetches instead of going undefined → flicker
- Disable Recharts animation on Treemap (isAnimationActive=false)
- Make .content scrollable (overflow-y: auto, flex: 1, min-height: 0)
  so charts below the fold are accessible

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/api/queries/catalog.ts

@@ -46,6 +46,7 @@ export function useRouteMetrics(from?: string, to?: string, appId?: string) {
       if (!res.ok) throw new Error('Failed to load route metrics');
       return res.json();
     },
+    placeholderData: (prev: unknown) => prev,
     refetchInterval,
   });
 }

ui/src/api/queries/dashboard.ts

@@ -106,7 +106,7 @@ export function usePunchcard(application?: string) {
   return useQuery({
     queryKey: ['dashboard', 'punchcard', application],
     queryFn: () => fetchJson<PunchcardCell[]>('/search/stats/punchcard', { application }),
-    placeholderData: (prev: PunchcardCell[] | undefined) => prev,
+    placeholderData: (prev: PunchcardCell[] | undefined) => prev ?? [],
     refetchInterval,
   });
 }

ui/src/pages/DashboardTab/DashboardTab.module.css

@@ -2,6 +2,10 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-bottom: 20px;
 }
 
 .refreshIndicator {

ui/src/pages/DashboardTab/Treemap.tsx

@@ -112,6 +112,7 @@ export function Treemap({ items, onItemClick }: TreemapProps) {
         nameKey="name"
         stroke="none"
         content={renderContent}
+        isAnimationActive={false}
       >
         <Tooltip
           contentStyle={rechartsTheme.tooltip.contentStyle}