fixed the component cards to work with mui's new grids

src/component/ComponentCard.tsx

@@ -5,12 +5,13 @@ import {
   CardActionArea,
   CardContent,
   CardHeader,
-  Grid2 as Grid,
+  //Grid2 as Grid,
   Switch,
   Theme,
   Tooltip,
   Typography
 } from "@mui/material";
+import Grid from '@mui/material/Grid2';
 import EventBlocker from "common/EventBlocker";
 import MeasurementSummary from "component/MeasurementSummary";
 import { useComponentAPI, useSnackbar, useThemeType } from "hooks";
@@ -366,15 +367,6 @@ export default function ComponentCard(props: Props) {
   };
 
   return (
-    <Grid
-      size={{ 
-        xs: 12, 
-        sm: showMobile ? 12 : 6, 
-        md: showMobile ? 12 : 6,
-        lg: showMobile ? 12 : 4,
-        xl: showMobile ? 12 : 3
-      }}
-    >
       <Card raised className={classes.card}>
         <CardActionArea
           onClick={(event: any) => openComponentPage(event)}
@@ -385,6 +377,6 @@ export default function ComponentCard(props: Props) {
           {sensorCard()}
         </CardActionArea>
       </Card>
-    </Grid>
+
   );
 }

src/pages/Device.tsx

@@ -1,4 +1,5 @@
-import { Button, Checkbox, Divider, FormControlLabel, Grid2 as Grid, List, ListItem, Typography } from "@mui/material";
+import { Button, Checkbox, Divider, FormControlLabel, List, ListItem, Typography } from "@mui/material";
+import Grid from '@mui/material/Grid2';
 import { Component, Device, Interaction, User } from "models";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import { useDeviceAPI, useGlobalState, useSnackbar } from "providers";
@@ -288,8 +289,18 @@ export default function DevicePage() {
         </li>
         <Divider component="li" />
         <ListItem>
-          <Grid container direction="row" justifyContent="flex-start" spacing={2}>
-            {sensorComponents}
+          <Grid width={"100%"} container justifyContent="flex-start" direction="row" spacing={2}>
+            {sensorComponents.map(card => (
+              <Grid  size={{ 
+                xs: 12, 
+                sm: isMobile ? 12 : 6, 
+                md: isMobile ? 12 : 6,
+                lg: isMobile ? 12 : 4,
+                xl: isMobile ? 12 : 3
+              }}>
+                {card}
+              </Grid>
+            ))}
           </Grid>
         </ListItem>
         <li>
@@ -299,8 +310,18 @@ export default function DevicePage() {
         </li>
         <Divider component="li" />
         <ListItem>
-          <Grid container direction="row" justifyContent="flex-start" spacing={2}>
-            {controllerComponents}
+          <Grid width={"100%"} container justifyContent="flex-start" direction="row" spacing={2}>
+            {controllerComponents.map(card => (
+              <Grid  size={{ 
+                xs: 12, 
+                sm: isMobile ? 12 : 6, 
+                md: isMobile ? 12 : 6,
+                lg: isMobile ? 12 : 4,
+                xl: isMobile ? 12 : 3
+              }}>
+                {card}
+              </Grid>
+            ))}
           </Grid>
         </ListItem>
         {device.settings.mutations.length > 0 && (