fix

frontend/src/static/js/components/BulkActionChangeOwnerModal.scss

@@ -144,16 +144,17 @@
 }
 
 .search-results {
-  position: fixed;
-  left: auto;
-  right: auto;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
   background-color: #f9f9f9;
   border: 1px solid #ddd;
   border-radius: 4px;
   margin-top: 4px;
   max-height: 250px;
   overflow-y: auto;
-  z-index: 10001;
+  z-index: 1000;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 
   .dark_theme & {

frontend/src/static/js/components/BulkActionChangeOwnerModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import './BulkActionChangeOwnerModal.scss';
 import { translateString } from '../utils/helpers/';
 
@@ -29,8 +29,6 @@ export const BulkActionChangeOwnerModal: React.FC<BulkActionChangeOwnerModalProp
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
   const [isProcessing, setIsProcessing] = useState(false);
   const [searchTimeout, setSearchTimeout] = useState<NodeJS.Timeout | null>(null);
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
-  const searchBoxRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!isOpen) {
@@ -41,17 +39,6 @@ export const BulkActionChangeOwnerModal: React.FC<BulkActionChangeOwnerModalProp
     }
   }, [isOpen]);
 
-  const updateDropdownPosition = () => {
-    if (searchBoxRef.current) {
-      const rect = searchBoxRef.current.getBoundingClientRect();
-      setDropdownPosition({
-        top: rect.bottom,
-        left: rect.left,
-        width: rect.width,
-      });
-    }
-  };
-
   const searchUsers = async (name: string) => {
     if (!name.trim()) {
       setSearchResults([]);
@@ -66,7 +53,6 @@ export const BulkActionChangeOwnerModal: React.FC<BulkActionChangeOwnerModalProp
 
       const data = await response.json();
       setSearchResults(data.results || data);
-      updateDropdownPosition();
     } catch (error) {
       console.error('Error searching users:', error);
     }
@@ -144,7 +130,7 @@ export const BulkActionChangeOwnerModal: React.FC<BulkActionChangeOwnerModalProp
         </div>
 
         <div className="change-owner-modal-content">
-          <div className="search-box-wrapper" ref={searchBoxRef}>
+          <div className="search-box-wrapper">
             <div className="search-box">
               <input
                 type="text"
@@ -153,6 +139,19 @@ export const BulkActionChangeOwnerModal: React.FC<BulkActionChangeOwnerModalProp
                 onChange={(e) => handleSearchChange(e.target.value)}
               />
             </div>
+            {searchResults.length > 0 && (
+              <div className="search-results">
+                {searchResults.slice(0, 10).map((user) => (
+                  <div
+                    key={user.username}
+                    className="search-result-item"
+                    onClick={() => handleUserSelect(user)}
+                  >
+                    {user.name} - {user.username}
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
 
           {selectedUser && (
@@ -175,27 +174,6 @@ export const BulkActionChangeOwnerModal: React.FC<BulkActionChangeOwnerModalProp
           </button>
         </div>
       </div>
-
-      {searchResults.length > 0 && (
-        <div
-          className="search-results"
-          style={{
-            top: `${dropdownPosition.top}px`,
-            left: `${dropdownPosition.left}px`,
-            width: `${dropdownPosition.width}px`,
-          }}
-        >
-          {searchResults.slice(0, 10).map((user) => (
-            <div
-              key={user.username}
-              className="search-result-item"
-              onClick={() => handleUserSelect(user)}
-            >
-              {user.name} - {user.username}
-            </div>
-          ))}
-        </div>
-      )}
     </div>
   );
 };