Add scroll overflow for legend and tooltip in Topology View.

rebeccahhh · Sep 26, 2022 · a1a4f26 · a1a4f26
1 parent 9c2185c
commit a1a4f26
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git 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
@@ -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>