make table 100% height

frontend/search/components/ngo/HostOfferLookupTable.tsx

@@ -15,6 +15,7 @@ import moment from "moment";
 
 import {useTranslation} from "react-i18next";
 import {resources} from '../../i18n/config';
+import {Box} from "@mui/material";
 
 global.moment = moment
 
@@ -32,7 +33,8 @@ const makeColumnDefinition = (data: any ) => Object.keys(data)
   .map(k => ({
     name: k,
     header: k.replace(/_/g, ' '),
-    type: typeof data[k]}))
+    type: typeof data[k]
+  }))
 
 const columnsRaw: ColumnRaw[] = [
   {
@@ -180,7 +182,10 @@ const HostOfferLookupTable = ({ data }: HostOfferLookupTableProps) => {
   const reactdatagridi18n = resources[language]?.translation?.reactdatagrid
 
 
-  return <>
+  return <Box sx={{display: 'flex', alignItems: 'stretch', flexDirection: 'column', minHeight: '100%'}}>
+    <div
+      style={{flex: '1 1', height: '100%'}}
+    >
       <DataGrid
         idProperty="id"
         filterable
@@ -192,10 +197,11 @@ const HostOfferLookupTable = ({ data }: HostOfferLookupTableProps) => {
         enableColumnAutosize={false}
         columns={columns}
         dataSource={dataSource}
-      style={{minHeight: '1000px'}}
         i18n={reactdatagridi18n || undefined}
+        style={{flex: '1 1', height: '100%'}}
       />
-  </>
+    </div>
+  </Box>
 }
 
 export default HostOfferLookupTable

frontend/search/styles/Home.module.css

@@ -3,6 +3,7 @@
 }
 
 .main {
+  max-height: 100vh;
   min-height: 100vh;
-  padding: 4rem 4rem;
+  padding: 0;
 }

frontend/search/styles/globals.css

@@ -4,6 +4,8 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  min-height: 100vh;
+  max-height: 100vh;
 }
 
 a {