feat(fe): UI text overflow improvements

label-sleuth · Nov 6, 2023 · 49baf8b · 49baf8b
1 parent 8a509a5
commit 49baf8b
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 110 deletions.
diff --git a/frontend/src/components/dropdown/Dropdown.tsx b/frontend/src/components/dropdown/Dropdown.tsx
@@ -17,14 +17,7 @@ import MenuItem from "@mui/material/MenuItem/MenuItem";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import InputLabel from "@mui/material/InputLabel";
 import classes from "./Dropdown.module.css";
-import {
-  Box,
-  Chip,
-  Stack,
-  SxProps,
-  Theme,
-  Typography,
-} from "@mui/material";
+import { Box, Chip, Stack, SxProps, Theme, Typography } from "@mui/material";
 import { ReactNode, useMemo } from "react";
 
 export interface DropdownOption {
@@ -141,7 +134,14 @@ export const ControlledSelect = ({
         MenuProps={MenuProps}
         className={value !== "" ? classes.dropdown : classes.dropdown_gray}
         disabled={options.length === 0}
-        sx={sx}
+        sx={{
+          "& .MuiSelect-select .MuiTypography-root": {
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis",
+          },
+          ...sx,
+        }}
       >
         {options?.map((option) => {
           if (option.value !== "") {