[Dashboard] do not change the geometry of hover actions on drag (#216412)

## Summary

While working on [PR
#208286](#208286), I found a small
but noticeable bug: When using keyboard navigation with compacted hover
actions, the element shifts slightly left when moving up/down.


https://github.com/user-attachments/assets/71e44671-c98a-4e09-a0a0-1c79efeefa25

####  Cause:
* `sensorOffsets` are calculated before activation, when the panel has a
1px border.
* Activating the element increases the border to 2px, throwing off the
position calculation.

#### Why we cannot use outline (that is used for panels to avoid
shifting the layout):

For panels, this problem is avoided by using outline, but here we can't
because `outline` applies uniformly to all sides.
Here, we need to avoid displaying a bottom border.

#### Before fix
(Notice how hover actions get slightly wider)


https://github.com/user-attachments/assets/a6b8dd02-4be2-4425-bf28-2af6dde3b023


https://github.com/user-attachments/assets/03c5aa71-cd3c-4181-bb4c-05a2003775f5

After Fix:
The dimensions of the whole active panel and actions are stable:


https://github.com/user-attachments/assets/d7ba766e-2567-4c3e-a2d6-9c95de2e2f9a


https://github.com/user-attachments/assets/220ee96f-29b8-4f68-bd9c-1d2ee15b9e5d

I know this makes the implementation slightly more complex, but I
couldn't find a simpler solution that covers all cases (dotted line
forces us to us `outline` or `border` for panel, but no bottom border
forces us to use `border` (which causes this problem) or `box-shadow`)

Author: mbondyra

Diff for: src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/use_hover_actions_styles.tsx

@@ -98,12 +98,18 @@ export const useHoverActionStyles = (isEditMode: boolean, showBorder?: boolean)
 
       border-radius: ${euiTheme.border.radius.medium};
       border: var(--internalBorderStyle);
+      border-width: ${euiTheme.border.width
+        .thin}; /* Prevents the element from resizing when dragged by keeping the border width constant (overriding the default change from 1px to 2px) */
+      box-shadow: var(
+        --hoverActionsSingleWrapperBoxShadowStyle
+      ); /* Simulates a 2px border without affecting layout by using a box-shadow */
       background-color: ${euiTheme.colors.backgroundBasePlain};
       grid-template-columns: max-content;
 
       & > * {
         // undo certain styles on all children so that parent takes precedence
         border: none !important;
+        box-shadow: none !important;
         padding: 0px !important;
         border-radius: unset !important;
         background-color: transparent !important;
@@ -131,6 +137,11 @@ export const useHoverActionStyles = (isEditMode: boolean, showBorder?: boolean)
         pointer-events: all; // re-enable pointer events for non-breakpoint children
         background-color: ${euiTheme.colors.backgroundBasePlain};
         border: var(--internalBorderStyle);
+        border-width: ${euiTheme.border.width
+          .thin}; /* Prevents the element from resizing when dragged by keeping the border width constant (overriding the default change from 1px to 2px) */
+        box-shadow: var(
+          --hoverActionsBoxShadowStyle
+        ); /* Simulates a 2px 3-side border without affecting layout by using a box-shadow */
         border-bottom: 0px;
         padding: var(--paddingAroundAction);
         padding-bottom: 0px;

Diff for: src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/use_layout_styles.tsx

@@ -33,6 +33,13 @@ export const useLayoutStyles = () => {
       --dashboardActivePanelBorderStyle: ${euiTheme.border.width.thick} solid
         ${euiTheme.colors.vis.euiColorVis0};
 
+      --dashboardHoverActionsActivePanelBoxShadow--singleWrapper: 0 0 0
+        ${euiTheme.border.width.thin} ${euiTheme.colors.vis.euiColorVis0};
+
+      --dashboardHoverActionsActivePanelBoxShadow: -${euiTheme.border.width.thin} 0 ${euiTheme.colors.vis.euiColorVis0},
+        ${euiTheme.border.width.thin} 0 ${euiTheme.colors.vis.euiColorVis0},
+        0 -${euiTheme.border.width.thin} ${euiTheme.colors.vis.euiColorVis0};
+
       &.kbnGrid {
         // remove margin top + bottom on grid in favour of padding in row
         padding-bottom: 0px;
@@ -84,6 +91,10 @@ export const useLayoutStyles = () => {
       .kbnGridPanel--active {
         // overwrite the border style on panels + hover actions for active panels
         --hoverActionsBorderStyle: var(--dashboardActivePanelBorderStyle);
+        --hoverActionsBoxShadowStyle: var(--dashboardHoverActionsActivePanelBoxShadow);
+        --hoverActionsSingleWrapperBoxShadowStyle: var(
+          --dashboardHoverActionsActivePanelBoxShadow--singleWrapper
+        );
 
         // prevent the hover actions transition when active to prevent "blip" on resize
         .embPanel__hoverActions {