drag resize is working

src/pages/Devices.tsx

@@ -27,7 +27,6 @@ import StatusSen5x from "common/StatusSen5x";
 import StatusDust from "common/StatusDust";
 import StatusGas from "common/StatusGas";
 import { cloneDeep } from "lodash";
-import { or } from "utils";
 import LoadingScreen from "app/LoadingScreen";
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -388,12 +387,14 @@ export default function Devices() {
     let columns: Column<Device>[] = [
       {
         title: "State",
+        // cellStyle: {width: 100000},
         // sortKey: "state",
         render: (device: Device) => {
           const status = device.status ?? pond.DeviceStatus.create()
           const deviceStateHelper = getDeviceStateHelper(status.state);
           return (
-            <Box className={classes.cellContainer} style={{ width: theme.spacing(0.5)}}>
+            // <Box className={classes.cellContainer} style={{ width: theme.spacing(0.5)}}>
+            <Box >
               <Tooltip title={deviceStateHelper.description}>{deviceStateHelper.icon}</Tooltip>
             </Box>
           )
@@ -408,10 +409,12 @@ export default function Devices() {
       },
       {
         title: "Device",
+        cellStyle: { width: 160 },
         sortKey: "name",
         render: (device: Device) => {
           return (
-            <Box className={classes.cellContainer}>
+            // <Box className={classes.cellContainer}>
+            <Box >
               <Chip 
                 variant="outlined"
                 label={device.settings?.name ? device.settings.name : "Device " + device.settings?.deviceId} 
@@ -423,11 +426,12 @@ export default function Devices() {
       },
       {
         title: "Description",
+        cellStyle: { width: 400 },
         render: (device: Device) => {
           const description = device.settings?.description ?? ""
           let size = (hasCo2 && !groupGas) ? 26 : 36
           return (
-            <Box className={classes.descriptionCellContainer} width={size*6}>
+            <Box >
               <Tooltip title={description}>
                 <span>
                   {description.length > size
@@ -697,9 +701,7 @@ export default function Devices() {
             dense
           >
             <ListItemIcon>
-              <Checkbox 
-                checked={!separateDust}
-              />
+              <Checkbox checked={!separateDust} />
             </ListItemIcon>
             <ListItemText primary={"Group Dust"} />
           </MenuItem>
@@ -709,10 +711,7 @@ export default function Devices() {
             dense
           >
             <ListItemIcon>
-              <Checkbox 
-                checked={groupGas}
-
-              />
+              <Checkbox checked={groupGas} />
             </ListItemIcon>
             <ListItemText primary={"Group Gas"} />
           </MenuItem>