[9.0] [Dashboard] Ensure resize handle does not overlap sticky header (#209937)

Heenawter · Heenawter · commit c6dca757de70 · 2025-02-06T08:10:55.000-07:00
## Summary Since #207275 is too large to backport to `9.0`/`8.18` and will only be in `9.1`/`8.19`, I wanted to at least backport **just** the z-index fix for the resize handler as described [here](https://github.com/elastic/kibana/pull/207275/files#r1931305375) . Unfortunately, the z-index used in that PR (`euiTheme.levels.maskBelowHeader`) only works thanks to other hover-action style changes, so I've had to set a hardcoded z-index (`2000`) in this PR instead. This acts as a "quick fix" for a pretty annoying bug while avoiding the risk of backporting the entire presentation panel refactor PR to `9.0`/`8.18` | Before | After | |--------|--------| | ![Screenshot 2025-01-23 at 5 49 13 PM](https://github.com/user-attachments/assets/ea5f2ffe-46bd-4259-920a-8798a1a08775) | ![image](https://github.com/user-attachments/assets/52a6ac63-5bb3-4cc0-a77d-99cac756aaa4) | (cherry picked from commit 7ebe1bf)
diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_container/component/grid/use_layout_styles.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_container/component/grid/use_layout_styles.tsx
@@ -50,7 +50,7 @@ export const useLayoutStyles = () => {
       }
 
       .kbnGridPanel--resizeHandle {
-        z-index: ${euiTheme.levels.mask};
+        z-index: 2000; // ensures the drag handle renders below sticky nav but abover panel contents on hover
 
         // applying mask via ::after allows for focus borders to show
         &:after {

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ export const useLayoutStyles = () => {`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`.kbnGridPanel--resizeHandle {`
`53`		`- z-index: ${euiTheme.levels.mask};`
	`53`	`+ z-index: 2000; // ensures the drag handle renders below sticky nav but abover panel contents on hover`
`54`	`54`
`55`	`55`	`// applying mask via ::after allows for focus borders to show`
`56`	`56`	`&:after {`