add Splitpane with map

frontend/search/components/ngo/HostOfferLookupWrapper.tsx

@@ -21,7 +21,7 @@ const HostOfferLookupWrapper = ({}: HostLookupWrapperProps) => {
         display: 'flex',
         alignItems: 'stretch',
         flexDirection: 'column',
-        height: '100vh'}}>
+        height: '100%'}}>
       <div>
         { (queryResult_ro.isFetching || queryResult_rw.isFetching) && t('loading…') }
         { (queryResult_ro.error || queryResult_rw.error) && t('An error occurred while trying to get data from the backend.') }

frontend/search/pages/index.tsx

@@ -3,6 +3,8 @@ import Head from 'next/head'
 import HostOfferLookupWrapper from '../components/ngo/HostOfferLookupWrapper'
 import styles from '../styles/Home.module.css'
 import { useTranslation } from 'react-i18next'
+import {SplitPane} from "react-collapse-pane";
+import {LeafletMapWithoutSSR} from "../components/ngo/LeafletMapWithoutSSR";
 
 const Home: NextPage = () => {
   const { t } = useTranslation()
@@ -15,7 +17,10 @@ const Home: NextPage = () => {
       </Head>
 
       <main className={styles.main}>
-        <HostOfferLookupWrapper />
+        <SplitPane split={"horizontal"}>
+          <LeafletMapWithoutSSR />
+          <HostOfferLookupWrapper />
+        </SplitPane>
       </main>
 
     </div>