Dashboard: Revert fixed header shown on mobile devices in the new panel header (#67510)

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}
             />
           )}