put the first components into the field page

src/field/FieldActions.tsx

@@ -63,6 +63,8 @@ export default function FieldActions(props: Props) {
     removeSelf: false
   });
 
+  console.log(permissions)
+
   const groupMenu = () => {
     const canShare = permissions.includes(pond.Permission.PERMISSION_SHARE);
     const canManageUsers = permissions.includes(pond.Permission.PERMISSION_USERS);

src/field/FieldList.tsx

@@ -30,9 +30,11 @@ import ResponsiveTable, { Column } from "common/ResponsiveTable";
 import FieldMinimap from "./Fieldminimap";
 import FieldActions from "./FieldActions";
 import FieldSettings from "./FieldSettings";
-import { ExpandMore, Settings } from "@mui/icons-material";
+import { ArrowForward, ExpandMore, Settings } from "@mui/icons-material";
 import { cloneDeep } from "lodash";
 import ShareAllFields from "./ShareAllFields";
+import EventBlocker from "common/EventBlocker";
+import { useNavigate } from "react-router-dom";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -57,6 +59,7 @@ export default function FieldList() {
   const [selectedField, setSelectedField] = useState<Field>()
   const [openFieldSettings, setOpenFieldSettings] = useState(false)
   const [shareOpen, setShareOpen] = useState(false)
+  const navigate = useNavigate();
 
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     setTabValue(newValue);
@@ -117,16 +120,22 @@ export default function FieldList() {
     return totalAcres;
   };
 
+  const goTo = (field: Field) => {
+    let path = field.key();
+    navigate(path, { state: {field: field, permissions: field.permissions} });
+  }
+
   const fieldActions = (field: Field) => {
     return (
-      <Box>
+      <EventBlocker>
         <IconButton 
           onClick={() => {
             setSelectedField(field)
             setOpenFieldSettings(true)
           }}><Settings /></IconButton>
         <FieldActions field={field} permissions={field.permissions} refreshCallback={()=>{}}/>
-      </Box>
+        {isMobile && <IconButton onClick={() => {goTo(field)}}><ArrowForward /></IconButton>}
+      </EventBlocker>
     )
   }
 
@@ -171,6 +180,9 @@ const columns: Column<Field>[] = [
       <ResponsiveTable<Field>
         columns={columns}
         rows={fields}
+        onRowClick={(row) => {
+          !isMobile && goTo(row)
+        }}
         setPage={(newPage)=>{
           setPage(newPage)
         }}
@@ -224,7 +236,7 @@ const columns: Column<Field>[] = [
                 <Grid2 alignItems="center" width="100%" container direction={"row"} justifyContent="space-between" wrap="nowrap">
                   <Grid2 size={6}>
                     <Box height={150} width="100%">
-                      <FieldMinimap field={row} />
+                      <FieldMinimap field={row} borderSpacing={0.001} squared />
                     </Box>
                   </Grid2>
                   <Grid2 size={6}>
@@ -232,6 +244,7 @@ const columns: Column<Field>[] = [
                       <Typography textAlign="center">{row.grainName()}</Typography>
                       <Typography textAlign="center">{row.acres()} Acres</Typography>
                     </Stack>
+                    <Button variant="contained" color="primary">Go</Button>
                   </Grid2>
                 </Grid2>
               </AccordionDetails>