FIX-1847 incident page changes with respect to length and width.

src/Components/Inputs/Select/index.jsx

@@ -158,7 +158,7 @@ Select.propTypes = {
 	sx: PropTypes.object,
 	labelControlSpacing: PropTypes.number,
 	truncate: PropTypes.bool, // New prop: enable/disable truncation
-	maxTruncateLength: PropTypes.number, // New prop: configurable length
+	maxTruncateLength: PropTypes.number, // New prop: deafult is 15
 };
 
 export default Select;

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

@@ -25,7 +25,6 @@ const OptionsHeader = ({
 		direction: "row",
 		alignItems: "center",
 		gap: theme.spacing(6),
-		marginLeft: "5px",
 	};
 
 	if (!shouldRender) return <SkeletonLayout />;
@@ -68,15 +67,10 @@ const OptionsHeader = ({
 					sx={{
 						ml: "auto",
 						alignItems: "stretch",
-						"& .MuiButtonBase-root": {
-							whiteSpace: "nowrap",
-							height: "auto",
-							"&.MuiButton-group": {
-								borderColor: theme.palette.primary.lowContrast,
-							},
-						},
-						"& .MuiButtonBase-root:hover": {
+						"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
 							borderColor: theme.palette.primary.lowContrast,
+							width: "auto",
+							whiteSpace: "nowrap",
 						},
 					}}
 				>
@@ -115,15 +109,10 @@ const OptionsHeader = ({
 					sx={{
 						ml: "auto",
 						alignItems: "stretch",
-						"& .MuiButtonBase-root": {
-							whiteSpace: "nowrap",
-							height: "auto",
-							"&.MuiButton-group": {
-								borderColor: theme.palette.primary.lowContrast,
-							},
-						},
-						"& .MuiButtonBase-root:hover": {
+						"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
 							borderColor: theme.palette.primary.lowContrast,
+							width: "auto",
+							whiteSpace: "nowrap",
 						},
 					}}
 				>

src/Utils/Input/utils.jsx

@@ -1,27 +1,37 @@
+import PropTypes from "prop-types";
+
 /**
  * Utility function to render a truncated value with an optional title.
- * @param {string} value - The selected value (But this will always come as id).
- * @param {array} items - The list of items to find the selected value from.
+ * @param {string} displayName - The name or text to display.
  * @param {boolean} truncate - Whether to truncate the text or not.
  * @param {number} maxLength - The maximum length of the text.
- * @param {string} placeholder - Placeholder text if no value is selected.
+ * @param {string} placeholder - Placeholder text if no value is provided.
  * @returns {JSX.Element} - The JSX element for the rendered value.
  */
 
-export const renderTruncatedValue = (displayName, truncate, maxLength, placeholder) => {
-	// If no value or the value is '0', return the placeholder
+export const renderTruncatedValue = function (
+	displayName,
+	truncate,
+	maxLength,
+	placeholder
+) {
 	if (!displayName || displayName === "0") return placeholder;
 
-	// Function to truncate the text with a dotted end
-	const truncateTextWithDottedEnds = (text, maxLength) => {
+	const truncateTextWithDottedEnds = function (text, maxLength) {
 		if (!text || text.length <= maxLength) return text;
 		return `${text.substring(0, maxLength)}...`;
 	};
 
-	// If truncation is enabled, return the truncated text with a title for full value
 	return truncate ? (
 		<span title={displayName}>{truncateTextWithDottedEnds(displayName, maxLength)}</span>
 	) : (
-		displayName
+		<span title={displayName}>{displayName}</span>
 	);
 };
+
+renderTruncatedValue.propTypes = {
+	displayName: PropTypes.string, // The name or text to display
+	truncate: PropTypes.bool, // Whether to truncate the text or not
+	maxLength: PropTypes.number, // The maximum length of the text
+	placeholder: PropTypes.string, // Placeholder text if no value is provided
+};