From 1b016549b3697370866e8417913162cb06f51982 Mon Sep 17 00:00:00 2001
From: Jithmi004 <jithmi.nawoda01@gmail.com>
Date: Mon, 6 Jan 2025 15:30:50 +0530
Subject: [PATCH] Fix property value overflow in publisher portal

---
 .../Apis/Details/Properties/EditableRow.jsx   | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Properties/EditableRow.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Properties/EditableRow.jsx
index 1f8d2eef474..257ec820423 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Properties/EditableRow.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Properties/EditableRow.jsx
@@ -34,6 +34,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import VisibilityIcon from '@mui/icons-material/Visibility';
+import Tooltip from '@mui/material/Tooltip';
 
 const PREFIX = 'EditableRow';
 
@@ -41,10 +42,11 @@ const classes = {
     link: `${PREFIX}-link`,
     checkBoxStyles: `${PREFIX}-checkBoxStyles`,
     colorPrimary: `${PREFIX}-colorPrimary`,
-    cancelButton: `${PREFIX}-cancelButton`
+    cancelButton: `${PREFIX}-cancelButton`,
+    tableCellStyles: `${PREFIX}-tableCellStyles`
 };
 
-const StyledTableRow = styled(TableRow)(() => ({
+const StyledTableRow = styled(TableRow)(({theme}) => ({
     [`& .${classes.link}`]: {
         cursor: 'pointer',
     },
@@ -62,6 +64,17 @@ const StyledTableRow = styled(TableRow)(() => ({
 
     [`& .${classes.cancelButton}`]: {
         marginLeft: 4,
+    },
+    [`& .${classes.tableCellStyles}`]: {
+        display: 'inline-block',
+        minWidth: '150px',
+        maxWidth: '600px',
+        whiteSpace: 'normal',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        [theme.breakpoints.up('xl')]: {
+            maxWidth: '1000px',
+        },
     }
 }));
 
@@ -195,9 +208,15 @@ function EditableRow(props) {
             ) : (
                 <>
                     <TableCell>
-                        <Box display='inline-block' minWidth={150}>
-                            {oldValue}
-                        </Box>
+                        <Tooltip
+                            placement='top'
+                            interactive
+                            title={oldValue}
+                        > 
+                            <Box className={classes.tableCellStyles}>
+                                {oldValue}
+                            </Box>
+                        </Tooltip>
                     </TableCell>
                     <TableCell>
                         {isVisibleInStore && (