Support for minimum pixel width panels?

[neilff]

Hey there, I'm curious if you have considered adding support for pixel-based min/max values on the Panel component?

We have a use case where it would be nice to have a panel that maintains a minimum fixed width in pixels so that it is still usable when the screen becomes quite small. VSCode has a somewhat similar behavior where the primary side bar is fixed width while the editor panel is fluid when resizing the window:

There are probably many edges I'm not considering here or maybe there is a way to do this today - curious to get your thoughts regardless.

[bvaughn]

It's come up a few times 😅 #46, #47, #78

---

Here is a way you could basically implement this in your application code:

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();
    };
  }, []);

---

Here my reasoning for not wanting to add it to the NPM package directly:

I think the problem with this is similar to the problem with external width/height props– either can change without PanelGroup/Panel re-rendering or being aware. (Example: an external stylesheet could define this style.)

So handling it fully would go from being something triggered only by pointer events to something that could be triggered by a lot of external things.

I don't think I want to try to support that level of complexity 😄

[neilff]

It's come up a few times

Apologies! Should have used search 😶 but appreciate the context here, ty!

[kurdin]

@bvaughn Thanks for the great library. It's easy to use and elegant.

However, this one limitation that many people asked you, we can't set a fixed pixel width or height for the first or last panel. In many panel designs, the first panel (or last) is often fixed and doesn't grow with window resizing, and only the next panels do. For example, in Chrome Dev Tools' Sources tab, only the first panel grows on browser resize.

Looking at your code, I see that you're using flex grow for panel sizes. If we want a fixed pixel size for panel 1, you could set its flex grow to 0 and flex basis to '300px' (or any other pixels size). The rest of the panels could then have the same flex grow but minus 300px for the first panel. This could work well for many cases.

Thanks again for your work. I hope this suggestion helps to implement this feature.

BTW: solution here does not work
https://codesandbox.io/s/react-resizable-panels-forked-m5qf69?file=/src/App.js
you can clearly see that ALL panels will change size on browser resize

[bvaughn]

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

---

❤️ → ☕ givebrian.coffee