committing all group related code

src/pages/Devices.tsx

@@ -1,5 +1,5 @@
 import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material";
-import { Box, Chip, CircularProgress, IconButton, Tab, Tabs, Theme, Tooltip } from "@mui/material";
+import { Box, Chip, CircularProgress, IconButton, Tab, Tabs, Theme, Tooltip, Typography } from "@mui/material";
 import { blue, green } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -47,6 +47,14 @@ const useStyles = makeStyles((theme: Theme) => {
     green: {
       color: green["600"]
     },
+    tab: {
+      display: "block",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      maxWidth: theme.spacing(26),
+      whiteSpace: "nowrap",
+      padding: theme.spacing(1.5)
+    }
   });
 });
 
@@ -78,7 +86,7 @@ export default function Devices() {
   // const [totalGroups, setTotalGroups] = useState(0);
 
   const updateGroups = (newGroups: Group[]) => {
-    setGroups(newGroups); // Trigger UI update if needed
+    setGroups(newGroups);
   };
 
   const [selectedGroup, setSelectedGroup] = useState<Group | undefined>(undefined);
@@ -152,7 +160,6 @@ export default function Devices() {
     })
   }
 
-
   const loadDevices = () => {
     setDevicesLoading(true)
     deviceAPI.list(
@@ -359,14 +366,14 @@ export default function Devices() {
 
   return(
     <PageContainer padding={isMobile ? 0 : 2}>
-      <SmartBreadcrumb key={"Device page crumbs"}/>
+      {/* <SmartBreadcrumb /> */}
       <Box 
         // onMouseEnter={() => setTabsHovered(true)}
         // onMouseLeave={() => setTabsHovered(false)}
         sx={{ 
           borderRadius: 1, 
           border: "1px solid rgba(150, 150, 150, 0.2)", 
-          marginTop: 1, 
+          marginTop: 0, 
           marginBottom: 1 
         }}
       >
@@ -377,19 +384,19 @@ export default function Devices() {
           scrollButtons="auto"
           sx={{ borderRadius: 1 }}
         >
-          <Tab value={"all"} label="All" />
+          <Tab wrapped value={"all"} label="All" />
           {groupsLoading ? 
             <Tab value={"loading"} label={<CircularProgress />}/>
           : groups.map((group, index) => {
             if (group.id()) return (
-              <Tab value={group.id().toString()} label={group.name()} key={"group-tab-"+index}/>
+              <Tab className={classes.tab} wrapped value={group.id().toString()} label={<Typography variant="inherit" noWrap>{group.name()}</Typography>} key={"group-tab-"+index}/>
             )
           })}
-          <Tab value={"never"} label={<CreateGroupIcon className={classes.green} />} onClick={() => openGroupSettings(undefined, "add")} />
+          <Tab wrapped value={"never"} label={<CreateGroupIcon className={classes.green} />} onClick={() => openGroupSettings(undefined, "add")} />
         </Tabs>
       </Box>
       <ResponsiveTable<pond.Device>
-        title="Devices"
+        title={<SmartBreadcrumb paddingBottom={1}/>}
         subtitle={subtitle()}
         rows={devices}
         columns={columns()}