Fix grid columns resizing when updating the rows

[alexkorep]

Why

Grid columns can't be resized if the grid's properties are updated during the resizing process.

Root cause: The ColumnResizer component handles resizing by adjusting CSS directly on DOM elements.

ColumnResizer is set inside VariableSizeGrid (from the react-window library) through the innerElementType property. However, VariableSizeGrid fully resets the innerElementType component whenever its properties change. This reset disrupts ColumnResizer's resizing state because the CSS changes are cleared each time ColumnResizer remounts.

What

1. The ColumnResizer component now manages its position using React state instead of directly manipulating CSS.
2. This state management has been moved into a new hook called useResizingState.
3. The useResizingState hook has been moved outside VariableSizeGrid and into the main Grid component, so it remains stable even when grid properties update.
4. A switch labeled "Add a row every 200ms" has been added to the GridExample component to make testing these changes easier.
5. A unit test has been created for the useResizingState hook.

Testing

The changes have been tested against the following browsers on Mac:

Google Chrome 130.0.6723.92

https://github.com/user-attachments/assets/f603ff5a-af45-4ebb-97dd-a891473b69e7

Firefox 132.0 (aarch64)

https://github.com/user-attachments/assets/f82c07aa-26ae-4cc3-aa60-034501ca483a

Safari 17.6 (19618.3.11.11.5)

https://github.com/user-attachments/assets/8359e8ce-bdf1-493b-84bc-5fe76fa9337a

[vercel[bot]]

You must have Developer access to commit code to ClickHouse on Vercel. If you contact an administrator and receive Developer access, commit again to see your changes.

Learn more: https://vercel.com/docs/accounts/team-members-and-roles/access-roles#team-level-roles