From 5bc27fde9d979aea3c96e704c90c3cbf25242398 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 28 Apr 2023 10:29:07 -0400
Subject: [PATCH] [v9.5.x] Dashboard: Revert fixed header shown on mobile
 devices in the new panel header (#67514)

Co-authored-by: Alexa V <239999+axelavargas@users.noreply.github.com>
fixed header shown on mobile devices in the new panel header (#67510)
---
 .../src/components/PanelChrome/PanelChrome.tsx  | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
index e8dbbc49e11..af1c05c9635 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 ? <LoadingBar width={width} ariaLabel="Panel loading bar" /> : null}
       </div>
 
-      {hoverHeader && !isTouchDevice && (
+      {hoverHeader && (
         <>
           <HoverWidget
             menu={menu}
@@ -197,12 +193,7 @@ export function PanelChrome({
               menu={menu}
               title={title}
               placement="bottom-end"
-              menuButtonClass={cx(
-                { [styles.hiddenMenu]: !isTouchDevice },
-                styles.menuItem,
-                dragClassCancel,
-                showOnHoverClass
-              )}
+              menuButtonClass={cx(styles.menuItem, dragClassCancel, showOnHoverClass)}
               onOpenMenu={onOpenMenu}
             />
           )}