[kbn-grid-layout] Allow panel to extend past viewport on resize (#208828)

Closes https://github.com/elastic/kibana/issues/208736

## Summary

This PR ensures that serverless / solution view Dashboards can be
resized to the full width.

The problem was, we had logic for "locking" the edge of the panel so
that it could not be resized past the width of the grid - however, we
did this by manually calculating the width of the grid via the
`runtimeSettings`, which did not account for the left-navigation added
on solution views (i.e. it relied on the left position of the grid being
zero in order to work). I **could** have fixed this while keeping the
original behaviour by locking it to the right edge of the grid -
however, this would require a call to `getBoundingRect()` on the panel's
parent component, which could be a slowdown point. See
bc96225a67 for this solution, if you're
curious.

Ultimately, we decided that the "max" width behaviour wasn't worth this
extra complexity, and so we are now exclusively using the mouse position
for calculating the width of the resized panel - therefore, this will
work regardless of whether the grid element has something to the left of
it (such as serverless navigation).

| Before | After |
|--------|--------|
| ![Jan-29-2025
12-45-28](https://github.com/user-attachments/assets/ec5388cc-b3aa-44b2-9b6c-6fb01d800bf5)
| ![Jan-29-2025
12-46-31](https://github.com/user-attachments/assets/efc0839b-e632-4160-bbff-97779971acc9)
|


**Before**


https://github.com/user-attachments/assets/019c7271-390a-4290-9151-f7ea9a5458b6


**After**


https://github.com/user-attachments/assets/08c38f36-66fe-4d53-9e43-87be99e94db6




### Checklist

- [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)
This commit is contained in:
Hannah Mudge 2025-01-29 15:02:37 -07:00 committed by GitHub
parent 2cb7bea5f3
commit a149a1147b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 3 additions and 13 deletions

View file

@ -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,
};
};

View file

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