fix(ui): improve modal rendering

Former-commit-id: e6ba122fa712adcdda7fc1cab441a073ac5fb3fa [formerly 79742d8dc9946f37d17af6c44a4f49d9bb865aa0] [formerly 6b1404bb219fa2e4cee587b80c75cd72fdb4a215 [formerly 6f3ac777d494e1ce77cec7a5f4ba871fb84543c5]]
Former-commit-id: 3a8eeb28b4d847c71213a4b4b5ae7d5a546eb346 [formerly a518e81711d39cc24cbd0c3f66702895cb5204a6]
Former-commit-id: 740f0a6a196aad3aa390b0f84bea1456e7b43da9

client/src/core/pages/Personalization/components/FontFamilySelector/components/FontFamilySelectorModal/index.tsx

@@ -107,7 +107,7 @@ function FontFamilySelectorModal({ onClose }: { onClose: () => void }) {
         </Listbox>
         <SearchInput
           namespace="core.personalization"
-          searchTarget="fontFamily.inputs.fontFamily"
+          searchTarget="fontFamily.items.fontFamily"
           setValue={setSearchQuery}
           value={searchQuery}
         />

client/src/core/routes/components/RootLayout.tsx

@@ -1,4 +1,4 @@
-import { ErrorScreen } from 'lifeforge-ui'
+import { ErrorScreen, ModalManager } from 'lifeforge-ui'
 import { ErrorBoundary } from 'react-error-boundary'
 import { Outlet } from 'react-router'
 
@@ -16,6 +16,7 @@ function RootLayout() {
           fallback={<ErrorScreen message="An unexpected error occurred." />}
         >
           <Outlet />
+          <ModalManager />
         </ErrorBoundary>
       </main>
     </>

client/src/core/routes/utils/routeBuilder.tsx

@@ -1,5 +1,5 @@
 import forgeAPI from '@utils/forgeAPI'
-import { LoadingScreen, ModalManager, WithOTP } from 'lifeforge-ui'
+import { LoadingScreen, WithOTP } from 'lifeforge-ui'
 import _ from 'lodash'
 import { Suspense } from 'react'
 import type { RouteObject } from 'react-router'
@@ -56,7 +56,6 @@ export function buildChildRoutes({
               <Component />
             </WithOTP>
           </Suspense>
-          <ModalManager />
         </APIKeyStatusProvider>
       )
     }

packages/lifeforge-ui/src/components/modals/core/components/ModalWrapper.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import { createPortal } from 'react-dom'
 
 function ModalWrapper({
   isOpen,
@@ -21,7 +22,7 @@ function ModalWrapper({
   zIndex?: number
   onExited?: () => void
 }) {
-  return (
+  return createPortal(
     <div
       ref={modalRef}
       className={clsx(
@@ -49,7 +50,8 @@ function ModalWrapper({
       >
         <div className="p-6">{children}</div>
       </div>
-    </div>
+    </div>,
+    document.getElementById('app') || document.body
   )
 }
 

shared/src/providers/PersonalizationProvider/index.tsx

@@ -65,7 +65,7 @@ export default function PersonalizationProvider({
     }
   }, [defaultValueOverride])
 
-  const rootElement = defaultValue.rootElement || document.createElement('body')
+  const rootElement = defaultValue.rootElement || document.body
 
   const [fontFamily, setFontFamily] = useState<string>(defaultValue.fontFamily)