Dashboards: Removes descending z-index assignment for grid items (#85563)

This commit is contained in:
kay delaney 2024-04-04 14:49:42 +01:00 committed by GitHub
parent ba3acf83bf
commit b5c33c540c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -221,15 +221,10 @@ export class DashboardGrid extends PureComponent<Props, State> {
for (const panel of this.props.dashboard.panels) {
const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
// used to allow overflowing content to show on top of the next panel
// requires parent create stacking context to prevent overlap with parent elements
const descIndex = this.props.dashboard.panels.length - panelElements.length;
const p = (
<GrafanaGridItem
key={panel.key}
className={panelClasses}
descendingOrderIndex={descIndex}
data-panelid={panel.id}
gridPos={panel.gridPos}
gridWidth={gridWidth}
@ -363,7 +358,6 @@ export class DashboardGrid extends PureComponent<Props, State> {
interface GrafanaGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
gridWidth?: number;
gridPos?: GridPos;
descendingOrderIndex?: number;
isViewing: boolean;
windowHeight: number;
windowWidth: number;
@ -378,7 +372,7 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
let width = 100;
let height = 100;
const { gridWidth, gridPos, isViewing, windowHeight, windowWidth, descendingOrderIndex, ...divProps } = props;
const { gridWidth, gridPos, isViewing, windowHeight, windowWidth, ...divProps } = props;
const style: CSSProperties = props.style ?? {};
if (isViewing) {
@ -408,7 +402,7 @@ const GrafanaGridItem = React.forwardRef<HTMLDivElement, GrafanaGridItemProps>((
// props.children[0] is our main children. RGL adds the drag handle at props.children[1]
return (
<div {...divProps} style={{ ...divProps.style, zIndex: descendingOrderIndex }} ref={ref}>
<div {...divProps} style={{ ...divProps.style }} ref={ref}>
{/* Pass width and height to children as render props */}
{[props.children[0](width, height), props.children.slice(1)]}
</div>