From 0c7343f5fc4649f261733f99f4aa39c55da40e51 Mon Sep 17 00:00:00 2001
From: Osura Viduranga <hackdarkmi7@gmail.com>
Date: Mon, 9 Mar 2026 11:11:36 +0530
Subject: [PATCH 1/5] Display full scope names

---
 .../Apis/Details/ApiConsole/CustomPadLock.jsx          | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
index fc6872f02db..20a3bc79e07 100644
--- a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
+++ b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
@@ -32,6 +32,7 @@ const StyledTableCell = styled(TableCell)(() => ({
     paddingLeft: '0',
     paddingTop: '0',
     textAlign: 'left',
+    verticalAlign: 'top',
 }));
 
 const StyledScopeCell = styled(TableCell)(() => ({
@@ -40,8 +41,8 @@ const StyledScopeCell = styled(TableCell)(() => ({
     textAlign: 'left',
     borderBottom: 'none',
     overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    wordBreak: 'break-word',
+    whiteSpace: 'normal',
 }));
 
 /**
@@ -102,6 +103,7 @@ function CustomPadLock(props) {
                 </Grid>
                 <Grid item justifyContent='flex-end' alignItems='right'>
                     <Tooltip
+                        interactive
                         title={(
                             <Table size='small'>
                                 <TableBody>
@@ -136,12 +138,12 @@ function CustomPadLock(props) {
                                                     defaultMessage='Scopes'
                                                 />
                                             </StyledTableCell>
-                                            <StyledTableCell style={{ maxWidth: 100, paddingRight: 0 }}>
+                                            <StyledTableCell style={{ maxWidth: 250, paddingRight: 0 }}>
                                                 {scopes.length > 0 && (
                                                     scopes.map((scope, index) => (
                                                     // eslint-disable-next-line react/no-array-index-key
                                                         <TableRow key={index}>
-                                                            <StyledScopeCell style={{ maxWidth: 100 }}>
+                                                            <StyledScopeCell style={{ maxWidth: 250 }}>
                                                                 {scope}
                                                             </StyledScopeCell>
                                                         </TableRow>

From c73148be3919b9f81f218cdccff1c76c3c2ffde6 Mon Sep 17 00:00:00 2001
From: Osura Viduranga <hackdarkmi7@gmail.com>
Date: Mon, 9 Mar 2026 11:26:06 +0530
Subject: [PATCH 2/5] Remove interactive prop

---
 .../src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
index 20a3bc79e07..eed3b0e208b 100644
--- a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
+++ b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
@@ -103,7 +103,6 @@ function CustomPadLock(props) {
                 </Grid>
                 <Grid item justifyContent='flex-end' alignItems='right'>
                     <Tooltip
-                        interactive
                         title={(
                             <Table size='small'>
                                 <TableBody>

From 7076d7ad000e32dff5bf9b1a477c011004fb55c0 Mon Sep 17 00:00:00 2001
From: Osura Viduranga <hackdarkmi7@gmail.com>
Date: Mon, 9 Mar 2026 13:55:14 +0530
Subject: [PATCH 3/5] Make scope list scrollable when max entry limit exceeds

---
 .../Apis/Details/ApiConsole/CustomPadLock.jsx | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
index eed3b0e208b..37d8997fcd2 100644
--- a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
+++ b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
@@ -45,6 +45,13 @@ const StyledScopeCell = styled(TableCell)(() => ({
     whiteSpace: 'normal',
 }));
 
+const ScrollContainer = styled('div')(() => ({
+    maxHeight: '150px',
+    overflowY: 'scroll',
+    display: 'block',
+    width: '100%',
+}));
+
 /**
  *
  *
@@ -139,14 +146,22 @@ function CustomPadLock(props) {
                                             </StyledTableCell>
                                             <StyledTableCell style={{ maxWidth: 250, paddingRight: 0 }}>
                                                 {scopes.length > 0 && (
-                                                    scopes.map((scope, index) => (
-                                                    // eslint-disable-next-line react/no-array-index-key
-                                                        <TableRow key={index}>
-                                                            <StyledScopeCell style={{ maxWidth: 250 }}>
-                                                                {scope}
-                                                            </StyledScopeCell>
-                                                        </TableRow>
-                                                    ))
+                                                    <ScrollContainer
+                                                        style={scopes.length <= 5 ? { overflowY: 'visible', maxHeight: 'none' } : {}}
+                                                    >
+                                                        <Table>
+                                                            <TableBody>
+                                                                {scopes.map((scope, index) => (
+                                                                    // eslint-disable-next-line react/no-array-index-key
+                                                                    <TableRow key={index}>
+                                                                        <StyledScopeCell style={{ maxWidth: 240 }}>
+                                                                            {scope}
+                                                                        </StyledScopeCell>
+                                                                    </TableRow>
+                                                                ))}
+                                                            </TableBody>
+                                                        </Table>
+                                                    </ScrollContainer>
                                                 )}
                                             </StyledTableCell>
                                         </TableRow>

From e5e9ff88ce0399cd3bec5afb005148ba55e9e28b Mon Sep 17 00:00:00 2001
From: Osura Viduranga <hackdarkmi7@gmail.com>
Date: Tue, 10 Mar 2026 15:10:18 +0530
Subject: [PATCH 4/5] Remove unwanted comment

---
 .../src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
index 37d8997fcd2..6e89783fc00 100644
--- a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
+++ b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
@@ -152,7 +152,6 @@ function CustomPadLock(props) {
                                                         <Table>
                                                             <TableBody>
                                                                 {scopes.map((scope, index) => (
-                                                                    // eslint-disable-next-line react/no-array-index-key
                                                                     <TableRow key={index}>
                                                                         <StyledScopeCell style={{ maxWidth: 240 }}>
                                                                             {scope}

From 63132e32fe9a2f34cec30f1e18303fcd69f90663 Mon Sep 17 00:00:00 2001
From: Osura Viduranga <hackdarkmi7@gmail.com>
Date: Tue, 10 Mar 2026 15:16:47 +0530
Subject: [PATCH 5/5] Fix sonarcloud comment

---
 .../app/components/Apis/Details/ApiConsole/CustomPadLock.jsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
index 6e89783fc00..252eb8fe269 100644
--- a/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
+++ b/portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/ApiConsole/CustomPadLock.jsx
@@ -151,8 +151,8 @@ function CustomPadLock(props) {
                                                     >
                                                         <Table>
                                                             <TableBody>
-                                                                {scopes.map((scope, index) => (
-                                                                    <TableRow key={index}>
+                                                                {scopes.map((scope) => (
+                                                                    <TableRow key={scope}>
                                                                         <StyledScopeCell style={{ maxWidth: 240 }}>
                                                                             {scope}
                                                                         </StyledScopeCell>