fix spotlight

src/frontend/src/components/nav/Layout.tsx

@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Container, Flex, Space } from '@mantine/core';
-import { SpotlightProvider } from '@mantine/spotlight';
+import { Spotlight } from '@mantine/spotlight';
 import { IconSearch } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
@@ -46,14 +46,6 @@ export default function LayoutComponent() {
 
   return (
     <ProtectedRoute>
-      <SpotlightProvider
-        actions={actions}
-        onActionsChange={actionsAreChanging}
-        searchIcon={<IconSearch size="1.2rem" />}
-        searchPlaceholder={t`Search...`}
-        shortcut={['mod + K', '/']}
-        nothingFoundMessage={t`Nothing found...`}
-      >
       <Flex direction="column" mih="100vh">
         <Header />
         <Container className={classes.layoutContent} size="100%">
@@ -61,8 +53,15 @@ export default function LayoutComponent() {
         </Container>
         <Space h="xl" />
         <Footer />
+        <Spotlight
+          actions={actions}
+          //onActionsChange={actionsAreChanging}
+          //searchIcon={<IconSearch size="1.2rem" />}
+          //searchPlaceholder={t`Search...`}
+          shortcut={['mod + K', '/']}
+          //nothingFoundMessage={t`Nothing found...`}
+        />
       </Flex>
-      </SpotlightProvider>
     </ProtectedRoute>
   );
 }

src/frontend/src/main.tsx

@@ -1,4 +1,5 @@
 import '@mantine/core/styles.css';
+import '@mantine/spotlight/styles.css';
 import * as Sentry from '@sentry/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';