From a1a4f26f1927765177889d5041941e8d55cf825b Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Mon, 19 Sep 2022 14:10:08 -0700
Subject: [PATCH] Add scroll overflow for legend and tooltip in Topology View.

---
 awx/ui/src/screens/TopologyView/Legend.js  | 7 ++++---
 awx/ui/src/screens/TopologyView/Tooltip.js | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/awx/ui/src/screens/TopologyView/Legend.js b/awx/ui/src/screens/TopologyView/Legend.js
index d674ecd4cf1d..e3534de5e58e 100644
--- a/awx/ui/src/screens/TopologyView/Legend.js
+++ b/awx/ui/src/screens/TopologyView/Legend.js
@@ -24,11 +24,12 @@ import {
 
 const Wrapper = styled.div`
   position: absolute;
-  top: -20px;
   left: 0;
-  padding: 10px;
+  padding: 0 10px;
   width: 150px;
   background-color: rgba(255, 255, 255, 0.85);
+  overflow: scroll;
+  height: 100%;
 `;
 const Button = styled(PFButton)`
   &&& {
@@ -61,7 +62,7 @@ function Legend() {
       <TextContent>
         <Text
           component={TextVariants.small}
-          style={{ fontWeight: 'bold', color: 'black' }}
+          style={{ fontWeight: 'bold', color: 'black', marginTop: 0 }}
         >
           {t`Legend`}
         </Text>
diff --git a/awx/ui/src/screens/TopologyView/Tooltip.js b/awx/ui/src/screens/TopologyView/Tooltip.js
index e2d8a792eb6c..a3f9ef15757c 100644
--- a/awx/ui/src/screens/TopologyView/Tooltip.js
+++ b/awx/ui/src/screens/TopologyView/Tooltip.js
@@ -33,11 +33,12 @@ import { formatDateString } from 'util/dates';
 
 const Wrapper = styled.div`
   position: absolute;
-  top: -20px;
   right: 0;
-  padding: 10px;
+  padding: 0 10px;
   width: 25%;
   background-color: rgba(255, 255, 255, 0.85);
+  overflow: scroll;
+  height: 100%;
 `;
 const Button = styled(PFButton)`
   &&& {
@@ -181,7 +182,7 @@ function Tooltip({
         <TextContent>
           <Text
             component={TextVariants.small}
-            style={{ fontWeight: 'bold', color: 'black' }}
+            style={{ fontWeight: 'bold', color: 'black', marginTop: 0 }}
           >
             {t`Details`}
           </Text>