[Dashboard] Fix resize bug (elastic#233755)

Closes elastic#233517

## Summary

This fixes a bug where panels could not be resized to the max width when
using a serverless / solution view.


Essentially, when calculating the "max right" position of the panel on
resize, we were not accounting for the left navigation. Rather than
using the **panel** element to determine what the maximum right pixel
is, we must use the layout element instead since it takes into account
the left offset.

| Before (no left nav) | After (no left nav) |
|--------|--------|
| ![Sep-02-2025
09-52-00](https://github.com/user-attachments/assets/77c9a2c3-b93f-488e-b1c1-b4ee3ab1f06f)
| ![Sep-02-2025
09-42-17](https://github.com/user-attachments/assets/05bdc446-9266-480c-a615-7d5d452a50a9)
|

| Before (left nav) | After (left nav) |
|--------|--------|
| ![Sep-02-2025
09-53-07](https://github.com/user-attachments/assets/11bff577-973d-42df-9035-e00038d86aeb)
| ![Sep-02-2025
09-45-18](https://github.com/user-attachments/assets/02ad582e-6b4c-4525-a522-330a3f7b7ea0)
|


### 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)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

Author: Heenawter

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

@@ -8,7 +8,7 @@
  */
 
 import type { MutableRefObject } from 'react';
-import type { GridPanelData } from '../../grid_panel';
+import type { ActivePanelEvent, GridPanelData } from '../../grid_panel';
 import { getGridLayoutStateManagerMock } from '../../test_utils/mocks';
 import { getSampleOrderedLayout } from '../../test_utils/sample_layout';
 import { moveAction } from './state_manager_actions';
@@ -34,7 +34,9 @@ describe('panel state manager actions', () => {
       } as any as HTMLDivElement,
     };
     gridLayoutStateManager.layoutRef.current = {
-      getBoundingClientRect: jest.fn().mockReturnValue({ top: 0, height: 100, bottom: 100 }),
+      getBoundingClientRect: jest
+        .fn()
+        .mockReturnValue({ top: 0, height: 100, bottom: 100, left: 0, width: 200, right: 200 }),
     } as any as HTMLDivElement;
   });
 
@@ -135,6 +137,51 @@ describe('panel state manager actions', () => {
         expect(panel.height).toBe(2);
         expect(panel.width).toBe(2);
       });
+
+      it('can extend panel to the full width of the layout when it is offset', () => {
+        gridLayoutStateManager.layoutRef.current = {
+          getBoundingClientRect: jest.fn().mockReturnValue({
+            top: 0,
+            height: 100,
+            bottom: 100,
+            left: 100, // offset the layout by 100 pixels
+            width: 200,
+            right: 100 + 872, // 872 = the width of the layout when column pixel width is 10
+          }),
+        } as any as HTMLDivElement;
+        gridLayoutStateManager.panelRefs.current.panel1 = {
+          getBoundingClientRect: jest.fn().mockReturnValue({
+            top: 0,
+            left: 100, // offset the panel by 100 pixels to the left as well
+            right: 150,
+            bottom: 50,
+            height: 50,
+            width: 50,
+          }),
+          scrollIntoView: jest.fn(),
+        } as any as HTMLDivElement;
+
+        // update the active panel event
+        gridLayoutStateManager.activePanelEvent$.next({
+          ...(gridLayoutStateManager.activePanelEvent$.getValue() as ActivePanelEvent),
+          panelDiv: gridLayoutStateManager.panelRefs.current.panel1!,
+        });
+
+        // bring the mouse **way** to the right to try to make the panel as big as possible
+        moveAction(
+          new MouseEvent('pointerdown', { clientX: 0, clientY: 0 }),
+          gridLayoutStateManager,
+          {
+            clientX: 10000,
+            clientY: 0,
+          },
+          lastRequestedPanelPosition
+        );
+
+        // the panel reaches the end of the layout
+        const panel = gridLayoutStateManager.gridLayout$.getValue()['main-0'].panels.panel1;
+        expect(panel.width).toBe(48);
+      });
     });
   });
 });

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

@@ -76,11 +76,15 @@ export const moveAction = (
   const previewRect = (() => {
     if (isResize) {
       const { resizeOptions } = currentPanelData;
+      const maxRight = gridLayoutElement
+        ? gridLayoutElement.getBoundingClientRect().right
+        : window.innerWidth;
       return getResizePreviewRect({
         activePanel,
         pointerPixel,
         runtimeSettings,
         resizeOptions,
+        maxRight,
       });
     } else {
       return getDragPreviewRect({ activePanel, pointerPixel });

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

@@ -46,11 +46,13 @@ export const getResizePreviewRect = ({
   pointerPixel,
   runtimeSettings,
   resizeOptions,
+  maxRight,
 }: {
   pointerPixel: PointerPosition;
   activePanel: ActivePanelEvent;
   runtimeSettings: RuntimeGridSettings;
   resizeOptions: GridPanelData['resizeOptions'];
+  maxRight: number;
 }) => {
   const panelRect = activePanel.panelDiv.getBoundingClientRect();
   const { minWidth, maxWidth, minHeight, maxHeight } = {
@@ -72,8 +74,7 @@ export const getResizePreviewRect = ({
         pointerPixel.clientX - activePanel.sensorOffsets.right, // actual width based on mouse position
         panelRect.left + getColumnCountInPixels({ columnCount: maxWidth, runtimeSettings }), // max width of panel
         // cannot extend width past the right edge of the grid layout
-        getColumnCountInPixels({ columnCount: runtimeSettings.columnCount, runtimeSettings }) +
-          runtimeSettings.gutterSize
+        maxRight
       ),
       panelRect.left + getColumnCountInPixels({ columnCount: minWidth, runtimeSettings }) // min width of panel
     ),