using chats instead of notes for the chat

src/pages/Team.tsx

@@ -17,49 +17,61 @@ import ObjectUsers from "user/ObjectUsers";
 import UserAvatar from "user/UserAvatar";
 import { or } from "utils/types";
 
-const useStyles = makeStyles((theme: Theme) => ({ 
-  avatar: {
-    width: theme.spacing(4),
-    height: theme.spacing(4)
-  },
-  button: {
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    textTransform: "capitalize",
-    color: getSignatureAccentColour(),
-  },
-  card: {
-    height: theme.spacing(72)
-  },
-  container: { 
-    display: 'flex', 
-    justifyContent: "space-between",
-    alignItems: 'center', 
-    width: '100%', 
-    position: 'relative', 
-  },
-  leftBox: { 
-    minWidth: 0, // Important for text overflow 
-    overflow: 'hidden',
-    textOverflow: "ellipsis",
-  },
-  rightBox: { 
-    flexShrink: 0, 
-    zIndex: 1, // Ensure it sits above the left box 
-  },
-  ellipsis: { 
-    whiteSpace: 'nowrap', 
-    overflow: 'hidden', 
-    textOverflow: 'ellipsis', 
-  }, 
-}));
+interface StylesProps {
+  isMobile: boolean;
+}
+
+const useStyles = makeStyles<Theme, StylesProps>((theme: Theme) => {
+  // const isMobile = useMobile()
+  return ({
+    avatar: {
+      // margin: theme.spacing(2),
+      width: theme.spacing(4),
+      height: theme.spacing(4)
+    },
+    button: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      textTransform: "capitalize",
+      color: getSignatureAccentColour(),
+    },
+    card: {
+      height: theme.spacing(72),
+    },
+    cardMobile: {
+      height: theme.spacing(48)
+    },
+    container: { 
+      display: 'flex', 
+      justifyContent: "space-between",
+      alignItems: 'center', 
+      width: '100%', 
+      position: 'relative', 
+    },
+    leftBox: { 
+      minWidth: 0, // Important for text overflow 
+      overflow: 'hidden',
+      textOverflow: "ellipsis",
+    },
+    rightBox: { 
+      flexShrink: 0, 
+      zIndex: 1, // Ensure it sits above the left box 
+    },
+    ellipsis: { 
+      whiteSpace: 'nowrap', 
+      overflow: 'hidden', 
+      textOverflow: 'ellipsis', 
+    }, 
+  });
+});
 
 export default function TeamPage() {
   const teamAPI = useTeamAPI();
   const userAPI = useUserAPI();
   const snackbar = useSnackbar()
-  const classes = useStyles();
+  const isMobile = useMobile();
+  const classes = useStyles({isMobile});
   const { state } = useLocation();
   // const { teamID } = useParams<{ teamID: string }>() as { teamID: string };
   const { teamID } = useParams<{ teamID: string }>();
@@ -71,7 +83,6 @@ export default function TeamPage() {
   const [userDialog, setUserDialog] = useState(false)
   const teamKey = teamID ? teamID : "";
 
-  const isMobile = useMobile();
 
   const getTeam = () => {
     if (teamKey.length < 1) return
@@ -119,7 +130,7 @@ export default function TeamPage() {
   };
 
   useEffect(() => {
-    if (state.team) return
+    if (state && state.team) return
     getTeam();
   }, []);
 
@@ -213,12 +224,12 @@ export default function TeamPage() {
       />
       <Grid2 container spacing={1}>
         <Grid2 size={{ xs: 12, sm: 6 }}>
-          <Card className={classes.card}>
+          <Card className={ isMobile ? classes.cardMobile : classes.card }>
             <Chat objectKey={team.key()} />
           </Card>
         </Grid2>
         <Grid2 size={{ xs: 12, sm: 6 }}>
-          <Card className={classes.card}>
+          <Card className={ isMobile ? classes.cardMobile : classes.card }>
 
           </Card>
         </Grid2>