From 5c42d2e9bac359f71aa19159250772e4c9152fc1 Mon Sep 17 00:00:00 2001
From: Bryan Frimin <bryan@getprobo.com>
Date: Wed, 18 Mar 2026 23:48:37 +0100
Subject: [PATCH] Simplify dropzone overlay to use fixed positioning without
 portal

Remove createPortal and main element ref/state in favor of a simple
fixed overlay with top-12 offset. This avoids React 19 strict mode
violations around ref access during render and setState in effects.

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
---
 .../pages/organizations/audits/AuditsPage.tsx | 24 ++++---------------
 1 file changed, 4 insertions(+), 20 deletions(-)

diff --git a/apps/console/src/pages/organizations/audits/AuditsPage.tsx b/apps/console/src/pages/organizations/audits/AuditsPage.tsx
index 1e3ba18ed..5a5ee5c1d 100644
--- a/apps/console/src/pages/organizations/audits/AuditsPage.tsx
+++ b/apps/console/src/pages/organizations/audits/AuditsPage.tsx
@@ -22,8 +22,7 @@ import {
   useDialogRef,
   useToast,
 } from "@probo/ui";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { useCallback, useEffect, useRef } from "react";
 import { useDropzone } from "react-dropzone";
 import {
   graphql,
@@ -190,34 +189,19 @@ export default function AuditsPage(props: Props) {
     setDroppedFile(null);
   };
 
-  const [mainEl, setMainEl] = useState<HTMLElement | null>(null);
-  useEffect(() => {
-    const el = document.querySelector("main");
-    if (el) {
-      el.style.position = "relative";
-      setMainEl(el);
-    }
-    return () => {
-      if (el) {
-        el.style.position = "";
-      }
-    };
-  }, []);
-
   return (
     <div className="space-y-6">
-      {isDragging && canCreateAudit && mainEl && createPortal(
+      {isDragging && canCreateAudit && (
         <div
           {...getRootProps()}
-          className="border-primary bg-primary/5 pointer-events-auto absolute inset-0 z-40 flex flex-col items-center justify-center border-2 border-dashed"
+          className="border-primary bg-primary/5 pointer-events-auto fixed inset-0 top-12 z-40 flex flex-col items-center justify-center border-2 border-dashed"
         >
           <input {...getInputProps()} />
           <IconUpload className="text-primary mb-2 size-8" />
           <p className="text-primary text-sm font-medium">
             {__("Drop a PDF to create an audit with a report")}
           </p>
-        </div>,
-        mainEl,
+        </div>
       )}
       <PageHeader
         title={__("Audits")}