From 6973cf55bdf52b541dfb852eef0123ff1352b4d0 Mon Sep 17 00:00:00 2001
From: e-for-eshaan <eshaanyadav24@gmail.com>
Date: Wed, 24 Apr 2024 18:09:54 +0530
Subject: [PATCH] makes the pat-permissions image to be responsive

---
 .../content/Dashboards/useIntegrationHandlers.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/web-server/src/content/Dashboards/useIntegrationHandlers.tsx b/web-server/src/content/Dashboards/useIntegrationHandlers.tsx
index 1e76939dd..44991cc80 100644
--- a/web-server/src/content/Dashboards/useIntegrationHandlers.tsx
+++ b/web-server/src/content/Dashboards/useIntegrationHandlers.tsx
@@ -190,12 +190,13 @@ const TokenPermissions = () => {
 
   const styles: SxProps[] = useMemo(() => {
     const baseStyles = {
-      border: `2px solid ${alpha('rgb(256,0,0)', 0.6)}`,
+      border: `2px solid ${alpha('rgb(256,0,0)', 0.4)}`,
       transition: 'all 0.8s ease',
       borderRadius: '12px',
       opacity: expand.value ? 0 : 1,
-      width: '770px',
+      width: '240px',
       position: 'absolute',
+      maxWidth: 'calc(100% - 48px)',
       left: '24px'
     };
 
@@ -221,12 +222,13 @@ const TokenPermissions = () => {
 
   const expandedStyles = useMemo(() => {
     const baseStyles = {
-      border: `2px solid ${alpha('rgb(256,0,0)', 0.6)}`,
+      border: `2px solid ${alpha('rgb(256,0,0)', 0.4)}`,
       transition: 'all 0.8s ease',
       borderRadius: '12px',
       opacity: !expand.value ? 0 : 1,
-      width: '770px',
+      width: '240px',
       position: 'absolute',
+      maxWidth: 'calc(100% - 48px)',
       left: '24px'
     };
 
@@ -253,7 +255,7 @@ const TokenPermissions = () => {
   }, [expand.value]);
 
   return (
-    <FlexBox col gap1>
+    <FlexBox col gap1 maxWidth={'100%'} overflow={'auto'}>
       <div
         onMouseEnter={expand.true}
         onMouseLeave={expand.false}
@@ -262,7 +264,8 @@ const TokenPermissions = () => {
           borderRadius: '12px',
           height: expand.value ? '1257px' : '240px',
           transition: 'all 0.8s ease',
-          position: 'relative'
+          position: 'relative',
+          maxWidth: '100%'
         }}
       >
         <Image