Merge pull request #1872 from Owaiseimdad/fix-1847-incident-page-truncate-of-string

fix-1847 truncate fix for selection component in incident page (or in general)

src/Components/Inputs/Select/index.jsx

@@ -18,6 +18,7 @@ import "./index.css";
  *    @param {string} props.items.name - The display name of each item.
  * @param {function} props.onChange - The function to handle onChange event.
  * @param {object} props.sx - The custom styles object for MUI Select component.
+ * @param {number} props.maxWidth - Maximum width in pixels for the select component. Enables responsive text truncation.
  * @returns {JSX.Element}
  *
  * @example
@@ -50,6 +51,7 @@ const Select = ({
 	sx,
 	name = "",
 	labelControlSpacing = 2,
+	maxWidth,
 }) => {
 	const theme = useTheme();
 	const itemStyles = {
@@ -59,6 +61,13 @@ const Select = ({
 		margin: theme.spacing(2),
 	};
 
+	const responsiveMaxWidth = {
+		xs: `${maxWidth * 0.5}px`,
+		sm: `${maxWidth * 0.75}px`,
+		md: `${maxWidth * 0.9}px`,
+		lg: `${maxWidth}px`,
+	};
+
 	return (
 		<Stack
 			gap={theme.spacing(labelControlSpacing)}
@@ -87,6 +96,7 @@ const Select = ({
 				sx={{
 					fontSize: 13,
 					minWidth: "125px",
+					...(maxWidth && { maxWidth: responsiveMaxWidth }),
 					"& fieldset": {
 						borderRadius: theme.shape.borderRadius,
 						borderColor: theme.palette.primary.lowContrast,
@@ -99,6 +109,22 @@ const Select = ({
 					},
 					...sx,
 				}}
+				renderValue={(selected) => {
+					const selectedItem = items.find((item) => item._id === selected);
+					const displayName = selectedItem ? selectedItem.name : placeholder;
+					return (
+						<Typography
+							sx={{
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap",
+							}}
+							title={displayName}
+						>
+							{displayName}
+						</Typography>
+					);
+				}}
 			>
 				{placeholder && (
 					<MenuItem
@@ -146,6 +172,11 @@ Select.propTypes = {
 	onBlur: PropTypes.func,
 	sx: PropTypes.object,
 	labelControlSpacing: PropTypes.number,
+	/**
+	 * Maximum width in pixels. Used to control text truncation and element width.
+	 * Responsive breakpoints will be calculated as percentages of this value.
+	 */
+	maxWidth: PropTypes.number,
 };
 
 export default Select;

src/Pages/Incidents/Components/OptionsHeader/index.jsx

@@ -52,7 +52,7 @@ const OptionsHeader = ({
 						backgroundColor: theme.palette.primary.main,
 						color: theme.palette.primary.contrastTextSecondary,
 					}}
-					truncate={true}
+					maxWidth={250}
 				/>
 			</Stack>
 			<Stack {...stackStyles}>