Add prop to Popover component to adjust max content height on small screen sizes

[jakejrichards]

Popovers often overflow the html body when vertical screen space is limited, so we frequently find ourselves adding custom popper.js modifier to shrink it based on available space. E.g.

{
    enabled: true,
    name: "computeMaxContentHeight",
    phase: "beforeWrite",
    requires: ["computeStyles"],
    fn: ({ state }) => {
        const { bottom } = state.elements.reference.getBoundingClientRect();
        const remainingSpaceBelowTarget = window.innerHeight - bottom;
        // Subtract 40px to account for popover padding and 30px of free space for aesthetics
        setMaxPopoverContentHeight(remainingSpaceBelowTarget - 40);
    },
},

Environment

• Package version(s): "@blueprintjs/core": ^5.19.0
• Browser and OS versions: Chrome v135.0.7049.115

Feature request

It would be nice to add a prop (naming TBD… maybe something like resizeOnOverflow) to the Popover component to automatically opt into this shrinking behavior when there's a lack of vertical screen space.

Examples

Before

After (smaller and scrollable)