feat: implement Portal component and refactor modals to use it for improved positioning

assets/admin/components/layout/Topbar.tsx

@@ -4,6 +4,7 @@ import {
   MagnifyingGlassIcon, XMarkIcon, CheckIcon,
 } from '@heroicons/react/24/outline';
 import { useUiStore, HUES, type BrandHue } from '../../stores/uiStore';
+import Portal from '../ui/Portal';
 
 export default function Topbar({ onMobileMenuOpen }: { onMobileMenuOpen?: () => void }) {
   const toggleSidebar       = useUiStore((s) => s.toggleSidebar);
@@ -71,6 +72,7 @@ export default function Topbar({ onMobileMenuOpen }: { onMobileMenuOpen?: () =>
 
       {/* Settings Panel */}
       {settingsPanelOpen && (
+        <Portal>
         <div
           className="overlay"
           style={{ placeItems: 'stretch', justifyContent: 'flex-start' }}
@@ -176,6 +178,7 @@ export default function Topbar({ onMobileMenuOpen }: { onMobileMenuOpen?: () =>
             </div>
           </div>
         </div>
+        </Portal>
       )}
     </>
   );