Merge pull request #12915 from kialam/fix-legend-and-tooltip-overflow-topology-view

Add scroll overflow for legend and tooltip in Topology View.
This commit is contained in:
kialam
2022-09-26 11:45:36 -07:00
committed by GitHub
2 changed files with 8 additions and 6 deletions

View File

@@ -24,11 +24,12 @@ import {
const Wrapper = styled.div` const Wrapper = styled.div`
position: absolute; position: absolute;
top: -20px;
left: 0; left: 0;
padding: 10px; padding: 0 10px;
width: 150px; width: 150px;
background-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.85);
overflow: scroll;
height: 100%;
`; `;
const Button = styled(PFButton)` const Button = styled(PFButton)`
&&& { &&& {
@@ -61,7 +62,7 @@ function Legend() {
<TextContent> <TextContent>
<Text <Text
component={TextVariants.small} component={TextVariants.small}
style={{ fontWeight: 'bold', color: 'black' }} style={{ fontWeight: 'bold', color: 'black', marginTop: 0 }}
> >
{t`Legend`} {t`Legend`}
</Text> </Text>

View File

@@ -33,11 +33,12 @@ import { formatDateString } from 'util/dates';
const Wrapper = styled.div` const Wrapper = styled.div`
position: absolute; position: absolute;
top: -20px;
right: 0; right: 0;
padding: 10px; padding: 0 10px;
width: 25%; width: 25%;
background-color: rgba(255, 255, 255, 0.85); background-color: rgba(255, 255, 255, 0.85);
overflow: scroll;
height: 100%;
`; `;
const Button = styled(PFButton)` const Button = styled(PFButton)`
&&& { &&& {
@@ -181,7 +182,7 @@ function Tooltip({
<TextContent> <TextContent>
<Text <Text
component={TextVariants.small} component={TextVariants.small}
style={{ fontWeight: 'bold', color: 'black' }} style={{ fontWeight: 'bold', color: 'black', marginTop: 0 }}
> >
{t`Details`} {t`Details`}
</Text> </Text>