[Dashboard] Presentation panel refactor (elastic#207275)

Closes elastic#206686
Closes elastic#197897
Part of elastic#207852

## Summary

This PR is a major refactor of the `PresentationPanel` component,
including an overhaul of the hover action and panel title components.
Some notable highlights include:
- All styles in the `PresentationPanel` component were moved from SASS
to Emotion
- The over-complicated logic to combine hover actions when the panel
shrinks was removed in favour of CSS, driven by a [container
query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)
Removing the `updateCombineHoverActions` function (which was defined in
a React component and not memoized) also made a difference in
performance when dragging:
    
   | Before | After |
   |--------|--------|
|
![image](https://github.com/user-attachments/assets/e66898d6-a6fc-42c7-9e24-f116d3bd85a6)
|
![image](https://github.com/user-attachments/assets/1f1d75ba-2ebc-4def-9d2e-14dfd5e1a585)
|
      

- The over-complicated logic defined in
`usePresentationPanelTitleClickHandle`, which was meant to ignore the
`onClick` that would trigger after a panel was dragged, was converted to
2 lines of CSS

### Small usability improvements

This PR also includes a few small usability improvements, such as:

- Ensuring that only the **first** row of hover actions overlaps with
the Dashboard's sticky top navigation bar, and this only happens when
the dashboard has no controls. This results in much better behaviour in
most scenarios:
  
  | Before | After |
  |--------|--------|
| ![Jan-27-2025
16-14-26](https://github.com/user-attachments/assets/2bf5eaa0-06ab-4d87-897f-d217f189daf7)
| ![Jan-27-2025
16-13-41](https://github.com/user-attachments/assets/61b0f06a-1363-4bfc-8a2b-c57a3e736552)
|

- Adding a small delay for hiding the hover actions on mouse leave,
which makes it a lot easier to grab the drag handle:

  | Before | After |
  |--------|--------|
| ![Jan-27-2025
16-21-11](https://github.com/user-attachments/assets/65138e53-1856-44f0-913f-01383b8aa6c2)
| ![Jan-27-2025
16-20-17](https://github.com/user-attachments/assets/7c8ba4d8-8b77-4bc5-85af-a082cace1f96)
|

- Preventing the resize handle from overlapping Dashboard's stick top
navigation:

  | Before | After |
  |--------|--------|
| ![Jan-27-2025
16-24-31](https://github.com/user-attachments/assets/5363a302-5f6a-4483-9782-516023567d87)
| ![Jan-27-2025
16-25-04](https://github.com/user-attachments/assets/8614d025-b45b-4af2-81d6-c62a086ca427)
|


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <[email protected]>

src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_header.tsx

@@ -7,9 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import { transparentize, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { ViewMode } from '@kbn/presentation-publishing';
-import classNames from 'classnames';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { DefaultPresentationPanelApi, PresentationPanelInternalProps } from '../types';
 import { PresentationPanelTitle } from './presentation_panel_title';
 import { usePresentationPanelHeaderActions } from './use_presentation_panel_header_actions';
@@ -38,6 +39,8 @@ export const PresentationPanelHeader = <
   showBadges = true,
   showNotifications = true,
 }: PresentationPanelHeaderProps<ApiType>) => {
+  const { euiTheme } = useEuiTheme();
+
   const { notificationElements, badgeElements } = usePresentationPanelHeaderActions<ApiType>(
     showNotifications,
     showBadges,
@@ -53,29 +56,45 @@ export const PresentationPanelHeader = <
     [setDragHandle]
   );
 
+  const { captionStyles, headerStyles } = useMemo(() => {
+    return {
+      captionStyles: css`
+        .dshLayout--editing &:hover {
+          cursor: move;
+          background-color: ${transparentize(euiTheme.colors.warning, 0.2)};
+        }
+      `,
+      headerStyles: css`
+        height: ${euiTheme.size.l};
+        overflow: hidden;
+        line-height: ${euiTheme.size.l};
+        padding: 0px ${euiTheme.size.s};
+
+        display: flex;
+        flex-grow: 1;
+        flex-wrap: wrap;
+        column-gap: ${euiTheme.size.s};
+        align-items: center;
+      `,
+    };
+  }, [euiTheme.colors.warning, euiTheme.size]);
+
   const showPanelBar =
     (!hideTitle && panelTitle) || badgeElements.length > 0 || notificationElements.length > 0;
 
   if (!showPanelBar) return null;
 
-  const headerClasses = classNames('embPanel__header', {
-    'embPanel--dragHandle': viewMode === 'edit',
-    'embPanel__header--floater': !showPanelBar,
-  });
-
-  const titleClasses = classNames('embPanel__title', {
-    'embPanel--dragHandle': viewMode === 'edit',
-  });
-
   return (
     <figcaption
-      className={headerClasses}
       data-test-subj={`embeddablePanelHeading-${(panelTitle || '').replace(/\s/g, '')}`}
+      className={'embPanel__header'}
+      css={captionStyles}
     >
       <div
+        className="embPanel__title"
         ref={memoizedSetDragHandle}
         data-test-subj="dashboardPanelTitle"
-        className={titleClasses}
+        css={headerStyles}
       >
         <PresentationPanelTitle
           api={api}