[LWC] Column header menus are not aligned correctly

[bmblb]

Forum post

When the Grid is placed inside of a Lightning "modal dialog", its column header context menus are displayed off point, making them unusable.

This is because one of the modal dialog component's elements has 'slds-modal__container' class which applies translate(0, 0) transformation, effectively shrinking the .b-float-root element horizontally. This confuses menu positioning as it is relative to the float root yet the click point is relative to the window.

The following override resolves the issue (for us).

const getWidgetHost = () => getLWCElement().firstChild;
const getFloatRoot = () => getWidgetHost().querySelector('.b-float-root');

class RectangleOverride {
    static get target() {
        return {
            class: Rectangle,
        };
    }

/**
 * @override Rectangle.prototype.alignTo()
 */
alignTo(spec) {
    const { constrainTo } = spec;

    const result = this._overridden.alignTo.call(this, spec);

    if (constrainTo === window || constrainTo === document) {
        const { x } = Rectangle.from(getFloatRoot());

        // Compensate for the position shift
        // caused by slds-modal__container's
        // CSS transform: translate(0, 0);
        result.translate(-x, 0);
    }

    return result;
}
}

[bmblb]

Without override

with override

[bmblb]

Another mention on the forum: https://forum.bryntum.com/viewtopic.php?p=114594#p114594

[bmblb]

Update: we can reproduce this behavior by adding LWC with Grid component to a default lightnint-modal component and calling menu

[bmblb]

Fixed by #7681