From c97737d5207c8a7372c27b60d9ca28e0ed8d7fe5 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 31 May 2026 13:11:52 -0500
Subject: [PATCH] fix camera list scrolling in state classification wizard on
 mobile

---
 web/src/components/classification/wizard/Step2StateArea.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/components/classification/wizard/Step2StateArea.tsx b/web/src/components/classification/wizard/Step2StateArea.tsx
index 7da1a62dc5..e768b1d970 100644
--- a/web/src/components/classification/wizard/Step2StateArea.tsx
+++ b/web/src/components/classification/wizard/Step2StateArea.tsx
@@ -51,6 +51,7 @@ export default function Step2StateArea({
   const [imageLoaded, setImageLoaded] = useState(false);
 
   const containerRef = useRef<HTMLDivElement>(null);
+  const popoverContainerRef = useRef<HTMLDivElement>(null);
   const imageRef = useRef<HTMLImageElement>(null);
   const stageRef = useRef<Konva.Stage>(null);
   const rectRef = useRef<Konva.Rect>(null);
@@ -224,7 +225,7 @@ export default function Step2StateArea({
   const canContinue = cameraAreas.length > 0;
 
   return (
-    <div className="flex flex-col gap-4">
+    <div ref={popoverContainerRef} className="flex flex-col gap-4">
       <div
         className={cn(
           "flex gap-4 overflow-hidden",
@@ -255,6 +256,7 @@ export default function Step2StateArea({
                   className="scrollbar-container w-64 border bg-background p-3 shadow-lg"
                   align="start"
                   sideOffset={5}
+                  container={popoverContainerRef.current}
                   onOpenAutoFocus={(e) => e.preventDefault()}
                 >
                   <div className="flex flex-col gap-2">