fix chips width

MetaCell · Apr 11, 2024 · 1ecdaca · 1ecdaca
1 parent e27b344
commit 1ecdaca
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/frontend/src/components/Widgets/CustomChipBoxComponent.tsx b/frontend/src/components/Widgets/CustomChipBoxComponent.tsx
@@ -2,6 +2,7 @@ import {Box, Chip, Tooltip} from "@mui/material";
 import {Option} from "../../types";
 import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
 import React from "react";
+import Typography from "@mui/material/Typography";
 const CustomChipBoxComponent = ({
    selectedOptions,
    CustomInputChip,
@@ -14,7 +15,14 @@ const CustomChipBoxComponent = ({
     { flex: 1,
       minWidth: 0,
       maxWidth: "fit-content",
-      cursor: "pointer"
+      cursor: "pointer",
+
+      '& .MuiTypography-root': {
+        maxWidth: "21rem",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+      }
     }:
     {cursor:  "initial",
       width: 'fit-content',
@@ -45,7 +53,7 @@ const CustomChipBoxComponent = ({
             e.stopPropagation();
             handleChipRemove(item);
           } : undefined}
-          label={item?.label}
+          label={<Typography>{item?.label}</Typography>}
         />
       )}
     </Tooltip>