From 2a7f0d64c11045684b3076dc31b8072cb0034d56 Mon Sep 17 00:00:00 2001 From: Shoaibdev7 Date: Tue, 23 Jul 2024 22:35:58 +0500 Subject: [PATCH 1/5] fix(graph-tooltip): make the tool tip scrollable --- .../Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx index 4fc4b1327..0858b5a9b 100644 --- a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx +++ b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx @@ -17,6 +17,7 @@ const Wrapper = styled(Flex)(({ theme }) => ({ boxShadow: '0px 1px 6px rgba(0, 0, 0, 0.1)', color: colors.primaryText1, zIndex: 100, + overflow: auto, transition: 'opacity 0.6s', padding: theme.spacing(2, 3), [theme.breakpoints.down('sm')]: { From 2e279083eb0004ca8b8dd2d72d055f3461a5033b Mon Sep 17 00:00:00 2001 From: Shoaibdev7 Date: Tue, 23 Jul 2024 22:45:21 +0500 Subject: [PATCH 2/5] fix(graph-tooltip): fix eslint error --- .../Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx index 0858b5a9b..2f72f4959 100644 --- a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx +++ b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx @@ -12,17 +12,20 @@ const Wrapper = styled(Flex)(({ theme }) => ({ top: '65px', right: '55px', width: '300px', - pointerEvents: 'none', + pointerEvents: 'auto', // Allow pointer events for scrolling background: colors.dashboardHeader, boxShadow: '0px 1px 6px rgba(0, 0, 0, 0.1)', color: colors.primaryText1, zIndex: 100, - overflow: auto, + overflow: 'hidden', // Hide overflow by default transition: 'opacity 0.6s', padding: theme.spacing(2, 3), [theme.breakpoints.down('sm')]: { padding: theme.spacing(1, 1.5), }, + '&:hover': { + overflow: 'auto', // Enable scrolling on hover + }, })) const Divider = styled(Flex)` From 55ee1fdf5cfbd3eee6d3ecd9131f01e8cd6ee0d4 Mon Sep 17 00:00:00 2001 From: Shoaibdev7 Date: Tue, 23 Jul 2024 22:47:52 +0500 Subject: [PATCH 3/5] fix(graph-tooltip): fix eslint error --- .../Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx index 2f72f4959..a324b75da 100644 --- a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx +++ b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx @@ -12,19 +12,19 @@ const Wrapper = styled(Flex)(({ theme }) => ({ top: '65px', right: '55px', width: '300px', - pointerEvents: 'auto', // Allow pointer events for scrolling + pointerEvents: 'auto', background: colors.dashboardHeader, boxShadow: '0px 1px 6px rgba(0, 0, 0, 0.1)', color: colors.primaryText1, zIndex: 100, - overflow: 'hidden', // Hide overflow by default + overflow: 'hidden', transition: 'opacity 0.6s', padding: theme.spacing(2, 3), [theme.breakpoints.down('sm')]: { padding: theme.spacing(1, 1.5), }, '&:hover': { - overflow: 'auto', // Enable scrolling on hover + overflow: 'auto', }, })) From 17e399a2466d5fc23fe1a3d6a0e95d53073850d0 Mon Sep 17 00:00:00 2001 From: Shoaibdev7 Date: Tue, 23 Jul 2024 22:58:42 +0500 Subject: [PATCH 4/5] fix(graph-tooltip): small changes --- .../Graph/Cubes/Cube/components/Tooltip/index.tsx | 8 +++----- src/components/Universe/Overlay/index.tsx | 1 + 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx index a324b75da..0a0889192 100644 --- a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx +++ b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx @@ -12,20 +12,18 @@ const Wrapper = styled(Flex)(({ theme }) => ({ top: '65px', right: '55px', width: '300px', - pointerEvents: 'auto', + pointerEvents: 'none', background: colors.dashboardHeader, boxShadow: '0px 1px 6px rgba(0, 0, 0, 0.1)', color: colors.primaryText1, zIndex: 100, - overflow: 'hidden', + maxHeight: '400px', + overflowY: 'auto', transition: 'opacity 0.6s', padding: theme.spacing(2, 3), [theme.breakpoints.down('sm')]: { padding: theme.spacing(1, 1.5), }, - '&:hover': { - overflow: 'auto', - }, })) const Divider = styled(Flex)` diff --git a/src/components/Universe/Overlay/index.tsx b/src/components/Universe/Overlay/index.tsx index 126026f59..38deb9c83 100644 --- a/src/components/Universe/Overlay/index.tsx +++ b/src/components/Universe/Overlay/index.tsx @@ -32,6 +32,7 @@ const OverlayWrap = styled('div')(({ theme }) => ({ height: '100%', width: '100%', padding: '16px', + overflow: 'hidden', [theme.breakpoints.down('sm')]: { top: 50, }, From eb010ed340deb3d0024a64aa3e651aa52f4a4f84 Mon Sep 17 00:00:00 2001 From: Shoaibdev7 Date: Tue, 23 Jul 2024 23:12:45 +0500 Subject: [PATCH 5/5] fix(graph-tooltip): allow content is scrollable --- .../Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx index 0a0889192..fbd3cd24b 100644 --- a/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx +++ b/src/components/Universe/Graph/Cubes/Cube/components/Tooltip/index.tsx @@ -12,7 +12,7 @@ const Wrapper = styled(Flex)(({ theme }) => ({ top: '65px', right: '55px', width: '300px', - pointerEvents: 'none', + pointerEvents: 'auto', background: colors.dashboardHeader, boxShadow: '0px 1px 6px rgba(0, 0, 0, 0.1)', color: colors.primaryText1,