Bei Profil die Dienststelle spackt nicht mehr

frontend/src/components/OrganizationSelector.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
 import type { OrganizationalUnit } from '@skillmate/shared'
 import api from '../services/api'
 import { ChevronRight, Building2, Search, X } from 'lucide-react'
@@ -207,73 +208,76 @@ export default function OrganizationSelector({ value, onChange, disabled }: Orga
         </button>
       </div>
 
-      {showModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-3xl w-full max-h-[80vh] flex flex-col">
-            {/* Header */}
-            <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-              <div className="flex items-center justify-between mb-3">
-                <h2 className="text-lg font-semibold dark:text-white">Organisationseinheit auswählen</h2>
+      {showModal && createPortal(
+        (
+          <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-3xl w-full max-h-[80vh] flex flex-col">
+              {/* Header */}
+              <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+                <div className="flex items-center justify-between mb-3">
+                  <h2 className="text-lg font-semibold dark:text-white">Organisationseinheit auswählen</h2>
+                  <button
+                    onClick={() => setShowModal(false)}
+                    className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+                  >
+                    <X className="w-5 h-5" />
+                  </button>
+                </div>
+                
+                {/* Search */}
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                  <input
+                    type="text"
+                    placeholder="Suche nach Name oder Code..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="w-full pl-10 pr-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
+                  />
+                </div>
+              </div>
+
+              {/* Tree View */}
+              <div className="flex-1 overflow-y-auto p-4">
+                {loading ? (
+                  <div className="text-center text-gray-500 dark:text-gray-400">
+                    Lade Organisationsstruktur...
+                  </div>
+                ) : hierarchy.length === 0 ? (
+                  <div className="text-center text-gray-500 dark:text-gray-400">
+                    Keine Organisationseinheiten vorhanden
+                  </div>
+                ) : (
+                  <div className="space-y-1">
+                    {hierarchy.map(unit => renderUnit(unit))}
+                  </div>
+                )}
+              </div>
+
+              {/* Footer */}
+              <div className="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between">
+                <button
+                  onClick={() => {
+                    setSelectedUnit(null)
+                    setCurrentUnitName('')
+                    onChange(null, '')
+                    setShowModal(false)
+                  }}
+                  className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+                >
+                  Auswahl entfernen
+                </button>
                 <button
                   onClick={() => setShowModal(false)}
-                  className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+                  className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                 >
-                  <X className="w-5 h-5" />
+                  Schließen
                 </button>
               </div>
-              
-              {/* Search */}
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-                <input
-                  type="text"
-                  placeholder="Suche nach Name oder Code..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="w-full pl-10 pr-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-                />
-              </div>
-            </div>
-
-            {/* Tree View */}
-            <div className="flex-1 overflow-y-auto p-4">
-              {loading ? (
-                <div className="text-center text-gray-500 dark:text-gray-400">
-                  Lade Organisationsstruktur...
-                </div>
-              ) : hierarchy.length === 0 ? (
-                <div className="text-center text-gray-500 dark:text-gray-400">
-                  Keine Organisationseinheiten vorhanden
-                </div>
-              ) : (
-                <div className="space-y-1">
-                  {hierarchy.map(unit => renderUnit(unit))}
-                </div>
-              )}
-            </div>
-
-            {/* Footer */}
-            <div className="p-4 border-t border-gray-200 dark:border-gray-700 flex justify-between">
-              <button
-                onClick={() => {
-                  setSelectedUnit(null)
-                  setCurrentUnitName('')
-                  onChange(null, '')
-                  setShowModal(false)
-                }}
-                className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
-              >
-                Auswahl entfernen
-              </button>
-              <button
-                onClick={() => setShowModal(false)}
-                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-              >
-                Schließen
-              </button>
             </div>
           </div>
-        </div>
+        ),
+        document.body
       )}
     </>
   )