diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx index 4017fd4c30a..000c08b6e4d 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx +++ b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx @@ -1,6 +1,5 @@ import { css, cx } from '@emotion/css'; import React, { CSSProperties, ReactElement, ReactNode } from 'react'; -import { useMedia } from 'react-use'; import { GrafanaTheme2, LoadingState } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; @@ -92,13 +91,10 @@ export function PanelChrome({ const theme = useTheme2(); const styles = useStyles2(getStyles); - const pointerQuery = '(pointer: coarse)'; - // detect if we are on touch devices - const isTouchDevice = useMedia(pointerQuery); - const hasHeader = !hoverHeader || isTouchDevice; + const hasHeader = !hoverHeader; // hover menu is only shown on hover when not on touch devices - const showOnHoverClass = !isTouchDevice ? 'show-on-hover' : ''; + const showOnHoverClass = 'show-on-hover'; const headerHeight = getHeaderHeight(theme, hasHeader); const { contentStyle, innerWidth, innerHeight } = getContentStyle(padding, theme, width, headerHeight, height); @@ -162,7 +158,7 @@ export function PanelChrome({ {loadingState === LoadingState.Loading ? : null} - {hoverHeader && !isTouchDevice && ( + {hoverHeader && ( <> )}