fix: adjust z-index so tooltip shows (#2059)

Co-authored-by: Jan Henrik Øverland <jan@dhis2.org>
dhis2 · Jan 10, 2022 · a0add62 · a0add62
1 parent 3cfb0eb
commit a0add62
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/src/components/ControlBar/ViewControlBar/ShowMoreButton.js b/src/components/ControlBar/ViewControlBar/ShowMoreButton.js
@@ -35,7 +35,12 @@ const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
                     <ChevronDown />
                 </div>
             ) : (
-                <Tooltip content={buttonLabel} placement="bottom">
+                <Tooltip
+                    content={buttonLabel}
+                    placement="top"
+                    openDelay={500}
+                    closeDelay={0}
+                >
                     {({ onMouseOver, onMouseOut, ref }) => (
                         <button
                             className={classes.showMore}

diff --git a/src/components/ControlBar/ViewControlBar/styles/DashboardsBar.module.css b/src/components/ControlBar/ViewControlBar/styles/DashboardsBar.module.css
@@ -24,7 +24,7 @@
 
 .expanded .container {
     height: var(--max-rows-height);
-    z-index: 2001;
+    z-index: 1999;
 }
 
 .spacer {

diff --git a/src/components/Dashboard/ViewDashboard.js b/src/components/Dashboard/ViewDashboard.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
-import { ComponentCover } from '@dhis2/ui'
 import cx from 'classnames'
 import DashboardContainer from './DashboardContainer'
 import ViewTitleBar from '../TitleBar/ViewTitleBar'
@@ -62,9 +61,8 @@ export const ViewDashboard = props => {
             />
             <DashboardContainer covered={controlbarExpanded}>
                 {controlbarExpanded && (
-                    <ComponentCover
+                    <div
                         className={classes.cover}
-                        translucent
                         onClick={() => setControlbarExpanded(false)}
                     />
                 )}

diff --git a/src/components/Dashboard/styles/ViewDashboard.module.css b/src/components/Dashboard/styles/ViewDashboard.module.css
@@ -6,6 +6,13 @@
 }
 
 .cover {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1998;
+    background: rgba(33, 43, 54, 0.4);
     display: none;
 }