[8.x] [kbn-grid-layout] Allow panel to extend past viewport on resize (…

…#208828) (#208848)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[kbn-grid-layout] Allow panel to extend past viewport on resize
(#208828)](#208828)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-29T22:02:37Z","message":"[kbn-grid-layout]
Allow panel to extend past viewport on resize (#208828)\n\nCloses
https://github.com/elastic/kibana/issues/208736\r\n\r\n##
Summary\r\n\r\nThis PR ensures that serverless / solution view
Dashboards can be\r\nresized to the full width.\r\n\r\nThe problem was,
we had logic for \"locking\" the edge of the panel so\r\nthat it could
not be resized past the width of the grid - however, we\r\ndid this by
manually calculating the width of the grid via the\r\n`runtimeSettings`,
which did not account for the left-navigation added\r\non solution views
(i.e. it relied on the left position of the grid being\r\nzero in order
to work). I **could** have fixed this while keeping the\r\noriginal
behaviour by locking it to the right edge of the grid -\r\nhowever, this
would require a call to `getBoundingRect()` on the panel's\r\nparent
component, which could be a slowdown point.
See\r\nbc96225a672be9f7168b34ca4e4ba97ef339aa34 for this solution, if
you're\r\ncurious.\r\n\r\nUltimately, we decided that the \"max\" width
behaviour wasn't worth this\r\nextra complexity, and so we are now
exclusively using the mouse position\r\nfor calculating the width of the
resized panel - therefore, this will\r\nwork regardless of whether the
grid element has something to the left of\r\nit (such as serverless
navigation).\r\n\r\n| Before | After |\r\n|--------|--------|\r\n|
![Jan-29-2025\r\n12-45-28](https://github.com/user-attachments/assets/ec5388cc-b3aa-44b2-9b6c-6fb01d800bf5)\r\n|
![Jan-29-2025\r\n12-46-31](https://github.com/user-attachments/assets/efc0839b-e632-4160-bbff-97779971acc9)\r\n|\r\n\r\n\r\n**Before**\r\n\r\n\r\nhttps://github.com/user-attachments/assets/019c7271-390a-4290-9151-f7ea9a5458b6\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://github.com/user-attachments/assets/08c38f36-66fe-4d53-9e43-87be99e94db6\r\n\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a149a1147bc772a2a49ea6a4a2dee95b78219f71","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","Feature:Dashboard","release_note:fix","Team:Presentation","loe:small","impact:critical","v9.0.0","backport:prev-minor","Project:Collapsable
Panels"],"title":"[kbn-grid-layout] Allow panel to extend past viewport
on
resize","number":208828,"url":"https://github.com/elastic/kibana/pull/208828","mergeCommit":{"message":"[kbn-grid-layout]
Allow panel to extend past viewport on resize (#208828)\n\nCloses
https://github.com/elastic/kibana/issues/208736\r\n\r\n##
Summary\r\n\r\nThis PR ensures that serverless / solution view
Dashboards can be\r\nresized to the full width.\r\n\r\nThe problem was,
we had logic for \"locking\" the edge of the panel so\r\nthat it could
not be resized past the width of the grid - however, we\r\ndid this by
manually calculating the width of the grid via the\r\n`runtimeSettings`,
which did not account for the left-navigation added\r\non solution views
(i.e. it relied on the left position of the grid being\r\nzero in order
to work). I **could** have fixed this while keeping the\r\noriginal
behaviour by locking it to the right edge of the grid -\r\nhowever, this
would require a call to `getBoundingRect()` on the panel's\r\nparent
component, which could be a slowdown point.
See\r\nbc96225a672be9f7168b34ca4e4ba97ef339aa34 for this solution, if
you're\r\ncurious.\r\n\r\nUltimately, we decided that the \"max\" width
behaviour wasn't worth this\r\nextra complexity, and so we are now
exclusively using the mouse position\r\nfor calculating the width of the
resized panel - therefore, this will\r\nwork regardless of whether the
grid element has something to the left of\r\nit (such as serverless
navigation).\r\n\r\n| Before | After |\r\n|--------|--------|\r\n|
![Jan-29-2025\r\n12-45-28](https://github.com/user-attachments/assets/ec5388cc-b3aa-44b2-9b6c-6fb01d800bf5)\r\n|
![Jan-29-2025\r\n12-46-31](https://github.com/user-attachments/assets/efc0839b-e632-4160-bbff-97779971acc9)\r\n|\r\n\r\n\r\n**Before**\r\n\r\n\r\nhttps://github.com/user-attachments/assets/019c7271-390a-4290-9151-f7ea9a5458b6\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://github.com/user-attachments/assets/08c38f36-66fe-4d53-9e43-87be99e94db6\r\n\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a149a1147bc772a2a49ea6a4a2dee95b78219f71"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208828","number":208828,"mergeCommit":{"message":"[kbn-grid-layout]
Allow panel to extend past viewport on resize (#208828)\n\nCloses
https://github.com/elastic/kibana/issues/208736\r\n\r\n##
Summary\r\n\r\nThis PR ensures that serverless / solution view
Dashboards can be\r\nresized to the full width.\r\n\r\nThe problem was,
we had logic for \"locking\" the edge of the panel so\r\nthat it could
not be resized past the width of the grid - however, we\r\ndid this by
manually calculating the width of the grid via the\r\n`runtimeSettings`,
which did not account for the left-navigation added\r\non solution views
(i.e. it relied on the left position of the grid being\r\nzero in order
to work). I **could** have fixed this while keeping the\r\noriginal
behaviour by locking it to the right edge of the grid -\r\nhowever, this
would require a call to `getBoundingRect()` on the panel's\r\nparent
component, which could be a slowdown point.
See\r\nbc96225a672be9f7168b34ca4e4ba97ef339aa34 for this solution, if
you're\r\ncurious.\r\n\r\nUltimately, we decided that the \"max\" width
behaviour wasn't worth this\r\nextra complexity, and so we are now
exclusively using the mouse position\r\nfor calculating the width of the
resized panel - therefore, this will\r\nwork regardless of whether the
grid element has something to the left of\r\nit (such as serverless
navigation).\r\n\r\n| Before | After |\r\n|--------|--------|\r\n|
![Jan-29-2025\r\n12-45-28](https://github.com/user-attachments/assets/ec5388cc-b3aa-44b2-9b6c-6fb01d800bf5)\r\n|
![Jan-29-2025\r\n12-46-31](https://github.com/user-attachments/assets/efc0839b-e632-4160-bbff-97779971acc9)\r\n|\r\n\r\n\r\n**Before**\r\n\r\n\r\nhttps://github.com/user-attachments/assets/019c7271-390a-4290-9151-f7ea9a5458b6\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://github.com/user-attachments/assets/08c38f36-66fe-4d53-9e43-87be99e94db6\r\n\r\n\r\n\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"a149a1147bc772a2a49ea6a4a2dee95b78219f71"}}]}]
BACKPORT-->

Co-authored-by: Hannah Mudge <[email protected]>

src/platform/packages/private/kbn-grid-layout/grid/use_grid_layout_events/pointer_event_utils.ts

@@ -7,34 +7,25 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { PanelInteractionEvent, RuntimeGridSettings } from '../types';
+import { PanelInteractionEvent } from '../types';
 import { getPointerPosition } from './sensors';
 import { UserInteractionEvent } from './types';
 
-const getGridWidth = (runtimeSettings: RuntimeGridSettings) => {
-  const { columnCount, gutterSize, columnPixelWidth } = runtimeSettings;
-  return (gutterSize + columnPixelWidth) * columnCount + gutterSize * 2;
-};
-
 // Calculates the preview rect coordinates for a resized panel
 export const getResizePreviewRect = ({
   interactionEvent,
   pointerPixel,
-  runtimeSettings,
 }: {
   pointerPixel: { clientX: number; clientY: number };
   interactionEvent: PanelInteractionEvent;
-  runtimeSettings: RuntimeGridSettings;
 }) => {
   const panelRect = interactionEvent.panelDiv.getBoundingClientRect();
+
   return {
     left: panelRect.left,
     top: panelRect.top,
     bottom: pointerPixel.clientY - interactionEvent.pointerOffsets.bottom,
-    right: Math.min(
-      pointerPixel.clientX - interactionEvent.pointerOffsets.right,
-      getGridWidth(runtimeSettings)
-    ),
+    right: pointerPixel.clientX - interactionEvent.pointerOffsets.right,
   };
 };
 

src/platform/packages/private/kbn-grid-layout/grid/use_grid_layout_events/state_manager_actions.ts

@@ -88,7 +88,6 @@ export const moveAction = (
       ? getResizePreviewRect({
           interactionEvent,
           pointerPixel,
-          runtimeSettings,
         })
       : getDragPreviewRect({
           interactionEvent,