building the table for harvest plans

src/pages/Field.tsx

@@ -1,6 +1,6 @@
 import { Field, fieldScope, HarvestPlan, teamScope } from "models";
 import { useFieldAPI, useGlobalState, useHarvestPlanAPI } from "providers";
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
 import PageContainer from "./PageContainer";
 import { useMobile, useSnackbar, useUserAPI } from "hooks";
@@ -103,7 +103,7 @@ export default function FieldPage() {
 
     const map = () => {
       return (
-        <Box height={550}>
+        <Box minHeight={550} height="100%">
           <FieldMinimap field={field} borderSpacing={0.001} squared/>
         </Box>
       )
@@ -139,22 +139,30 @@ export default function FieldPage() {
 
     const desktopView = () => {
       return (
+        <React.Fragment>
+        <Box>
+        {field.name()}
         <Grid2 container spacing={1}>
           <Grid2 size={4}>
-            <Card raised>
+            <Card raised sx={{height: "100%"}}>
               {map()}
             </Card>
           </Grid2>
           <Grid2 size={3}>
-            <Card raised>
+            <Card raised sx={{height: "100%"}}>
             {weather()}
             </Card>
           </Grid2>
           <Grid2 size={5}>
-            <Card raised>
+            <Card raised sx={{height: "100%"}}>
             {tasks()}
             </Card>
           </Grid2>
+        </Grid2>
+        </Box>
+        <Box>
+        Harvest Overview
+        <Grid2 container spacing={1}>
           <Grid2 size={4}>
             <Card raised>
             {harvestPlans()}
@@ -166,6 +174,8 @@ export default function FieldPage() {
             </Card>
           </Grid2>
         </Grid2>
+        </Box>
+        </React.Fragment>
       )
     }