Splitter feedback

[toniengelhardt]

I'm currently implementing the Splitter component into my app. For grid-like panels the relative size values probably make a lot of sense, but a common scenario is also resizing a sidebar or nav. In that case the relative values are impractical, bc I would usually want to fix the size of the sidebar to a certain value, e.g. 16rem. Then, when I resize the browser window, I want the sidebar width to stay constant, while the content width adapts. With relative values both panels will shrink if the window shrinks and the latter is hard to achieve. Relative values for minSize and maxSize are also impractical in most cases I guess.

A solution might be to pass strings instead of numbers, e.g. size: '50%' or size: '12rem'.

Another problem I stumbled into is programmatically resizing the panels, e.g. on double click I want to reset to default sizes. Currently I need to update the size of both panels manually and if I adjust them in the wrong order I get an error that the total value cannot exceed 100. Would be nice if the second panel size would always auto adjust if I set the size of the first.

As far as I understand it, the total value anyway always has to be 100, otherwise the component becomes buggy.

[segunadebayo]

The splitter component has been redesigned lately for better DX. We recommend working with percentages instead of unit values (px, rems) to ensure proper SSR support.

Feel free to check it here https://ark-ui.com/react/docs/components/splitter

[toniengelhardt]

Thanks, I'll take a look.

For my use case it is really critical that the sidebar value stays fixed in rem, especially when the sidebar is collapsed. You can also check for instance https://vscode.dev, they do the same. When you resize the browser window the sidebar width stays fixed and the content adjusts. IMO that is the desired behavior in most cases.

I made it work now by calculating the relative size based on the window/content width and then just keep it in sync with watchers, but it's a bit of gymnastics. You can take a look at the result here: https://archery.promptmetheus.com.