VGrid min-width/min-height interferes with resizable columns and rows

[giladgray]

Describe the bug
VGrid sets min-width and min-height on the virtual cell based on the initial measured contents.
If I later resize my columns or rows (using an interaction that involves dragging some handle in the header), this min size is not updated. The upshot is that I cannot shrink my row or column: the inner content does appear smaller, but the min-width on the parent element does not update.

To Reproduce
Here is a video of my component. To reproduce yourself, you could add some state to change the width or height of a cell (or row/column) after rendering it.

vgrid-min-width-bug.mp4

Expected behavior
I would expect the resize observer to catch this and update the min-width accordingly.

Platform:

• OS: [Windows, MacOS, Linux, Android, iOS]
• Browser: [Chrome, Firefox, Safari, Edge]
• Version of this package: [0.40.3]
• Version of framework: [react, vue, solid-js, svelte] [x.x.x]

Additional context
Add any other context about the problem here.

Might be related to #634

[giladgray]

I added a new story to VGrid.stories.tsx that makes repro really simple. I went digging through resizer.ts and store.ts but couldn't figure out quickly how to add support for shrinking items. Any pointers @inokawa?

export const Resizeable: StoryObj = {
  render: () => {
    const LENGTH = 1000;
    const [width, setWidth] = useState(80)
    const [height, setHeight] = useState(80)
    return (
      <div
        style={{ height: "100vh", display: "flex", flexDirection: "column" }}
      >
        <div>
          <label>
            col
            <input
              type="number"
              value={width}
              onChange={(e) => setWidth(e.target.valueAsNumber)}
            />
          </label>
          <label>
            row
            <input
              type="number"
              value={height}
              onChange={(e) => setHeight(e.target.valueAsNumber)}
            />
          </label>
        </div>
        <VGrid style={{ height: "100vh" }} row={LENGTH} col={LENGTH} cellHeight={40} cellWidth={40}>
          {({ rowIndex, colIndex }) => (
            <div
              style={{
                border: "solid 1px gray",
                background: "white",
                padding: 4,
                width,
                height,
              }}
            >
              {rowIndex} / {colIndex}
            </div>
          )}
        </VGrid>
      </div>
    );
  },
};

[inokawa]

It might be a limitation of current implementation. And we have a plan to migrate VGrid to CSS grid in #124.

[inokawa]

And current logic of VGrid keeps column widths in a tricky way, which may be causing this problem. Maybe we should change it or add a method to discard size cache for resizing.

virtua/src/core/resizer.ts

Lines 239 to 252 in f025833

	if (resizedCols.size) {
	const widthResizes: ItemResize[] = [];
	resizedCols.forEach((colIndex) => {
	let maxWidth = 0;
	maybeCachedRowIndexes.forEach((rowIndex) => {
	const size = sizeCache.get(getKey(rowIndex, colIndex));
	if (size) {
	maxWidth = max(maxWidth, size[1]);
	}
	});
	if (maxWidth) {
	widthResizes.push([colIndex, maxWidth]);
	}
	});

[giladgray]

yes I was looking at this code snippet myself, with the max(...) call. the issue might be even deeper -- detecting when it is appropriate to reduce the size of an entire row/col.

I think that a method to discard the cache would likely be sufficient! I could call that in my component when the drag interaction completes. what would that API look like in your mind? might you be able to take a stab at it soon? or if you can describe how to clear the cache, I'd be willing to try it myself.

[vilgeforc5]

might be related to #648
*didn't figure out the stable solution either