From 6f82fef1979514bab34b68df02ab62ae788a35ba Mon Sep 17 00:00:00 2001
From: lmejbar <42239917+lmejbar@users.noreply.github.com>
Date: Tue, 7 Sep 2021 09:32:44 +0200
Subject: [PATCH] Signed-off-by Lmejbar : Added SearchBar and ScrollBar on
 Techradar

Signed-off-by: lmejbar <42239917+lmejbar@users.noreply.github.com>
---
 .../src/components/RadarLegend/RadarLegend.tsx   | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
index 6acc34fe7c..c96b79ee28 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
+++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
@@ -32,21 +32,15 @@ export type Props = {
 };
 
 const useStyles = makeStyles<Theme>(theme => ({
-  foreignObject: {
-    overflow: 'scroll',
-    scrollbarWidth: 0 as any, // hide in FF
-    '&::-webkit-scrollbar': {
-      display: 'none', // hide in Chrome
-    },
+  quadrantLegend: {
+    overflowY: 'scroll',
+    scrollbarWidth: 'thin',
   },
   quadrant: {
     height: '100%',
     width: '100%',
     overflow: 'scroll',
-    scrollbarWidth: 0 as any, // hide in FF
-    '&::-webkit-scrollbar': {
-      display: 'none', // hide in Chrome
-    },
+    scrollbarWidth: 'thin',
     // pointerEvents: 'none',
   },
   quadrantHeading: {
@@ -232,7 +226,7 @@ const RadarLegend = (props: Props): JSX.Element => {
         y={quadrant.legendY}
         width={quadrant.legendWidth}
         height={quadrant.legendHeight}
-        className={classes.foreignObject}
+        className={classes.quadrantLegend}
         data-testid="radar-quadrant"
       >
         <div className={classes.quadrant}>