diff --git a/gsa/src/web/components/dashboard/display/datadisplay.js b/gsa/src/web/components/dashboard/display/datadisplay.js
index a509d20eb5..0669f39fdc 100644
--- a/gsa/src/web/components/dashboard/display/datadisplay.js
+++ b/gsa/src/web/components/dashboard/display/datadisplay.js
@@ -34,6 +34,7 @@ import {excludeObjectProps} from 'gmp/utils/object';
import Icon from 'web/components/icon/icon';
import IconDivider from 'web/components/layout/icondivider';
+import Layout from 'web/components/layout/layout';
import Loading from 'web/components/loading/loading';
@@ -44,6 +45,8 @@ import Display, {
DISPLAY_HEADER_HEIGHT, DISPLAY_BORDER_WIDTH,
} from './display';
+export const MENU_PLACEHOLDER_WIDTH = 26;
+
const ownProps = [
'title',
'dataTransform',
@@ -81,16 +84,18 @@ const FilterString = styled.div`
`;
const IconBar = styled.div`
- height: 26px;
- width: 100%;
- min-height: 26px;
+ height: 100%;
+ width: 26px;
display: flex;
flex-grow: 1;
- justify-content: flex-end;
- align-items: center;
- padding: 5px 10px;
+ justify-content: center;
+ align-items: start;
+ padding-top: 5px;
position: absolute;
+ right: 0;
z-index: ${Theme.Layers.higher};
+ background: ${Theme.lightGray};
+ opacity: 0;
transition: opacity 500ms;
`;
@@ -99,14 +104,9 @@ const DisplayBox = styled.div`
flex-grow: 1;
position: relative;
- ${IconBar} {
- visibility: hidden;
- opacity: 0;
- }
-
&:hover ${IconBar} {
- visibility: visible;
opacity: 1;
+ transition: opacity 500ms;
}
`;
@@ -304,51 +304,53 @@ class DataDisplay extends React.Component {
{...otherProps}
>
- {isLoading ?
- :
- showContent &&
-
-
-
- {showFilterSelection &&
-
- }
- {hasSvg &&
-
- }
- {showCsvDownload &&
-
- }
-
-
- {children({
- id,
- data: transformedData,
- width,
- height,
- svgRef: this.svgRef,
- })}
-
- }
- {showFilterString &&
-
- ({_('Applied filter: ')}
- {filter.name}
- {filter.simple().toFilterString()})
-
- }
+
+ {isLoading ?
+ :
+ showContent &&
+
+ {children({
+ id,
+ data: transformedData,
+ width,
+ height,
+ svgRef: this.svgRef,
+ })}
+
+ }
+
+
+ {showFilterSelection &&
+
+ }
+ {hasSvg &&
+
+ }
+ {showCsvDownload &&
+
+ }
+
+
+ {showFilterString &&
+
+ ({_('Applied filter: ')}
+ {filter.name}
+ {filter.simple().toFilterString()})
+
+ }
+