Add minSize/maxSize, but in pixels

[NepeinAV]

Hi! Can you add min/max panel size restrictions, but in pixels? Sometimes, if the window size becomes too small, panel content may shrink too much, which causes UI issues (overflows, etc.).

[bvaughn]

I understand why that would be convenient in some cases but I don’t think it’s something I want to support- because it would require changing the public api in a non obvious way: This library doesn’t control its own outer dimensions, so it couldn’t prevent panels from expanding/contracting past a certain point as its own width/height changed.

You should be able to accomplish this using minSize/maxSize and a min/max external height/width though!

[bvaughn]

Copying from #48 (comment) in case others see this issue.

---

Here is an example of what I mean:
https://codesandbox.io/s/react-resizable-panels-forked-m5qf69?file=/src/App.js

  const MIN_SIZE_IN_PIXELS = 100;

  const [minSize, setMinSize] = useState(10);

  useLayoutEffect(() => {
    const panelGroup = document.querySelector('[data-panel-group-id="group"]');
    const resizeHandles = document.querySelectorAll(
      "[data-panel-resize-handle-id]"
    );
    const observer = new ResizeObserver(() => {
      let height = panelGroup.offsetHeight;

      resizeHandles.forEach((resizeHandle) => {
        height -= resizeHandle.offsetHeight;
      });

      // Minimum size in pixels is a percentage of the PanelGroup's height,
      // less the (fixed) height of the resize handles.
      setMinSize((MIN_SIZE_IN_PIXELS / height) * 100);
    });
    observer.observe(panelGroup);
    resizeHandles.forEach((resizeHandle) => {
      observer.observe(resizeHandle);
    });

    return () => {
      observer.disconnect();
    };
  }, []);

[bvaughn]

I think I have a possible solution for the pixel-based constraints; see #176

---

❤️ → ☕ givebrian.coffee