feat: add the waters

frontend/src/app/platform/ProjectsPage.tsx

@@ -58,6 +58,7 @@ import {
 } from './projectGraphStorage'
 import { toast } from 'sonner'
 import { NewProjectDialog } from './NewProjectDialog'
+import { ProjectsPageBackground } from './ProjectsPageBackground'
 import type { Project } from './types'
 
 const PAGE_SIZE_OPTIONS = [10, 25, 50] as const
@@ -315,7 +316,9 @@ export function ProjectsPage() {
   )
 
   return (
-    <div className="flex flex-1 flex-col gap-4 p-4">
+    <div className="relative flex flex-1 flex-col min-h-0">
+      <ProjectsPageBackground className="absolute inset-0 pointer-events-none" />
+      <div className="relative flex min-h-0 flex-1 flex-col gap-4 p-4 overflow-auto">
       <TooltipProvider>
         <div className="flex flex-wrap items-center gap-3">
           <h1 className="p-3 scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
@@ -797,6 +800,7 @@ export function ProjectsPage() {
           </DialogContent>
         </Dialog>
       </TooltipProvider>
+      </div>
     </div>
   )
 }