style:

  add reproducable example of bug to VGrid.stories.tsx

Author: borisbelobrov1

.storybook/main.js

@@ -51,7 +51,7 @@ export default process.env.STORYBOOK_VUE
         }
       : {
           stories: ["../stories/react/**/*.stories.@(js|jsx|ts|tsx)"],
-          addons: ["@storybook/addon-storysource"],
+          addons: ["@storybook/addon-storysource", "@storybook/addon-viewport"],
           framework: {
             name: "@storybook/react-vite",
             options: {},

package.json

@@ -83,6 +83,7 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.1.6",
     "@storybook/addon-storysource": "^8.6.2",
+    "@storybook/addon-viewport": "^8.6.4",
     "@storybook/docs-tools": "^8.6.2",
     "@storybook/react": "^8.6.2",
     "@storybook/react-vite": "^8.6.2",

stories/react/basics/VGrid.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React, { useRef, useState } from "react";
+import React, {forwardRef, useRef, useState} from "react";
 import { experimental_VGrid as VGrid, VGridHandle } from "../../../src";
+import {CustomCellComponent} from "../../../lib";
 
 export default {
   component: VGrid,
@@ -48,6 +49,59 @@ export const Fixed: StoryObj = {
   },
 };
 
+export const FitToViewport: StoryObj = {
+  render: () => {
+    return (
+      <VGrid style={{ height: "100vh" }} row={50} col={3}>
+        {({ rowIndex, colIndex }) => (
+          <div
+            style={{
+              border: "solid 1px gray",
+              background: "white",
+              padding: 4,
+              width: '33vw',
+            }}
+          >
+            {rowIndex} / {colIndex}
+          </div>
+        )}
+      </VGrid>
+    );
+  },
+};
+
+const Item: CustomCellComponent = forwardRef(({style: {minWidth: _minWidthUnused, minHeight: _minHeightUnused, ...style}, ...props}, ref) => {
+    return <div {...props} style={style} ref={ref} />
+})
+
+export const FitToViewportAdjusted: StoryObj = {
+  render: () => {
+    return (
+      <VGrid
+          style={{ height: "100vh" }}
+          row={50}
+          col={3}
+          item={Item}
+      >
+        {({ rowIndex, colIndex }) => (
+          <div
+            style={{
+              border: "solid 1px gray",
+              background: "white",
+              padding: 4,
+              width: '33vw',
+            }}
+          >
+            {rowIndex} / {colIndex}
+          </div>
+        )}
+      </VGrid>
+    );
+  },
+};
+
+
+
 export const DynamicHeight: StoryObj = {
   render: () => {
     return (