Add "resize avoidant" mode to Pane

[jpenilla]

Describe the feature in detail (code, mocks, or screenshots encouraged)

When a PaneGroup's container (i.e. the browser window) is resized, panes maintain their proportions. This is the current and intended behavior.

When using paneforge to implement a resizable sidebar, this behavior may not be desired. For example, if I set my sidebar to be 300px, and then increase the width of my browser window, I want the sidebar Pane to stay 300px, and the extra space to be allocated to other Panes. Or, if I shrink the browser window, the sidebar Pane should not shrink until it's forced to by the container becoming smaller than it's current size. This could be implemented as a "resize avoidant" mode on Panes.

This behavior is typical of IDEs and apps like Discord.

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

PaperMC/diff-viewer#45

[jpenilla]

Slightly sketchy workaround:

// Maintain sidebar size when resizing window
watch.pre(
    () => this.windowInnerWidth,
    (newValue, oldValue) => {
        if (oldValue !== undefined && newValue !== undefined && this.sidebarPane) {
            const oldPx = (this.sidebarPane.getSize() / 100) * oldValue;
            const newProportion = this.getProportion(oldPx, newValue);
            this.sidebarPane.resize(newProportion);
        }
    },
);

Not using pre will cause lag.

The sidebar will fidget a bit when resizing the browser window with a grabber on the opposite side it sits on. I.e. if you drag the window bigger to the right, the sidebar will only fidget if it's on the left. But for the most part it works as expected.

One remaining issue is when reusing an old cookie for a different size browser window, since the suggested way is to persist proportions. If you persist px as well, there will be a layout shift on hydration since we can't apply this px value serverside.