fix: react-doctor prefer-tag-over-role 18→0 (native dialog, label dropzones, ul lists)

src/components/admin/UsersPage.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { AdminUserRow, UpdateAdminUserInput } from "@/actions/admin/users";
 import { formatDate } from "@/lib/format-date";
 import CreateUserModal from "./CreateUserModal";
@@ -158,6 +158,25 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
     setError(null);
   }
 
+  useEffect(() => {
+    if (!panelOpen) return;
+    function onPointerDown(e: PointerEvent) {
+      const dialog = document.querySelector("[data-panel-dialog]") as HTMLDialogElement | null;
+      if (!dialog) return;
+      const rect = dialog.getBoundingClientRect();
+      if (
+        e.clientX < rect.left ||
+        e.clientX > rect.right ||
+        e.clientY < rect.top ||
+        e.clientY > rect.bottom
+      ) {
+        closePanel();
+      }
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [panelOpen]);
+
   function setRole(role: EditingUser["role"]) {
     setEditing((prev) => ({ ...prev, role }));
   }
@@ -508,18 +527,16 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
 
       {/* Slide-in panel */}
       {panelOpen && (
-        <div
-          role="dialog"
-          aria-modal="true"
+        <dialog
+          ref={(el) => {
+            if (el && !el.open) el.showModal();
+          }}
+          data-panel-dialog
           aria-label={editing.isNew ? "Create user" : "Edit user"}
-          className="fixed inset-0 z-50 flex justify-end bg-black/20"
-          onClick={closePanel}
-          onKeyDown={(e) => { if (e.key === "Escape") closePanel(); }}
-          tabIndex={-1}
+          className="bg-transparent backdrop:bg-black/20 p-0 border-0 max-w-none max-h-none w-full h-full ml-auto mr-0"
         >
           <div
-            className="relative flex h-full w-full max-w-md flex-col overflow-y-auto bg-white shadow-xl ring-1 ring-stone-200"
-            onClick={(e) => e.stopPropagation()}
+            className="relative flex h-full w-full max-w-md flex-col overflow-y-auto bg-white shadow-xl ring-1 ring-stone-200 ml-auto"
           >
             <div className="flex items-center justify-between border-b border-stone-100 px-6 py-4">
               <h2 className="text-lg font-bold text-stone-900">
@@ -699,7 +716,7 @@ export default function UsersPage({ initialUsers, brands, currentUser, onUserCre
               </div>
             </div>
           </div>
-        </div>
+        </dialog>
       )}
       {/* Password reset modal */}
       {passwordModal && (