On reloading the content inside my one cell of grid change its size

[ObaidAshiq]

Describe the bug

I have created a card which is resizable and dragable,The above picture shows i have adjusted my card to this size, and the content is taken this shape,
But when i reload the page, the cards content has changed
This is after i reload

These cards are dynamically generated
`

  <>
  {data?.length>0 && <>
  
  <div className='w-full px-4 sm:px-8 '>
    <button className="mt-4 px-4 py-2.5 border border-gray-300 rounded-lg shadow-xs  gap-[10px]   bg-[#FFFFFF]  text-sm font-semibold text-gray-700 " onClick={() => resetLayout()}>Reset Layout</button>

    <ResponsiveReactGridLayout
      useCSSTransforms={false}
      draggableHandle=".drag-handle"
      className="layout w-full"
      // margin={[10,10]}
      cols={{ lg: 24, md: 20, sm: 12, xs: 8, xxs: 4 }}
      // containerPadding={[30,30]}
      rowHeight={30}
      layouts={state.layouts}
      onLayoutChange={(layout, layouts) => onLayoutChange(layout, layouts)}
      >
      {console.log(state.layouts)}
      {/* {console.log('Charts',data)} */}
      {/* <div className="w-full mxsm:px-2 msm:px-4 sm:px-8 grid grid-cols-2 gap-4"> */}
        {data?.map((el,index) => {
          
          return ( <div
              key={el.id}
              // key={index.toString()}
              className=" border border-gray-200  rounded-xl shadow-sm overflow-clip"
              data-grid={(index%2===0)?{ w: 12, h: 9, x: 0, y: 0 }:{ w: 12, h: 9, x: 12, y: 0 }}
            >
              <NautoChart
                id={el.id}
                chartData={el.chart}
                chartName={el.chartTitle} //string
                chartDataModel={el.dataModel} //string
                chartCountField={el.countField} //string
                chartFilter={el.filter} //array of objects  [{ key: 'model', value: '12345678', _id: '651fa046a28530c26c8fcc65' },...]
                options={options}
                setShowModal={setShowModal}
                setShowEditChartModal={setShowEditChartModal}
                handleDelete={handleDelete}
                passValuesToChartDisplay={handlePassValuesToNautoInventory}
              />
              
            </div>
          );
        })}
      {/* </div> */}
    </ResponsiveReactGridLayout>

  </div>
  </>`

My functions inside this component
`
const ResponsiveReactGridLayout = useMemo(() => WidthProvider(Responsive), []);

  const getFromLS=(key)=> {
 
   let ls = {};
   if (typeof window !== "undefined" && window.localStorage) {
   try {
     ls = JSON.parse(window.localStorage.getItem("rgl-Inventory")) || {};
   } catch (e) {
     console.log(e);
   }
  }
 return ls[key];
  };

  //Set to local storage- layout
   const saveToLS = (key, value) => {
   if (typeof window !== "undefined" && window.localStorage) {
      window.localStorage.setItem(
        "rgl-Inventory",
         JSON.stringify({
            [key]: value,
         })
     );
   }
 };

  const [state, setState] = useState({
    layouts: getFromLS("layoutsInventory") || {},
  });

  useEffect(() => {
    setState({ layouts: getFromLS("layoutsInventory") || {} });
  }, []);

 const resetLayout = () => {
    setState({ layouts: {} });
  };

   const onLayoutChange = (layout, layouts) => {
    if(!isLoading){

     // console.log(layouts)
      saveToLS("layoutsInventory", layouts);
     // console.log('Lauyots' ,layouts);
      setState({ layouts });
     }
  };`

Some imports
import { WidthProvider, Responsive } from "react-grid-layout"; import "react-grid-layout/css/styles.css"; import "react-resizable/css/styles.css";

Your Example Website or App

N/A

Steps to Reproduce the Bug or Issue

Create a card whose content can be dynamically scaled, when resizing the card container
Store and fetch your layouts from Local Storage
Resize: SHrink the card container
Reload the page

Expected behavior

react-grid-layout library version

^1.3.4

Operating System Version

Windows

Browser

Chrome

Additional context

No response

Screenshots or Videos

No response

[ObaidAshiq]

chrome_0ldblQ7h09.mp4

[balbatross]

I started having this issue with a silent bump of the react-grid-layout version, for me I think it was multiple factors.

1. Having a minimum width for your container can help stop the first load from trying to make your items smaller
2. The documentation doesn't clearly explain that onLayoutChange is called on mount and on change to the layout prop

Combined what would happen is the first load would see a container too small for my items and would take it upon itself to resize the elements before emitting an onLayoutChange event which then updated my persistent state.

[ObaidAshiq]

@balbatross What are ur takeaways to fix this?

Can u share all the factors?
With fixes if possible

That would be great

[ObaidAshiq]

@balbatross Can u help me in figuring the problem?

[balbatross]

@ObaidAshiq Sorry been busy at work lately, if you can share a reproduction of the issue I can have a go at finding a fix for your use case, because the fix involves some css changes I'm not sure if there's a one size fits all fix yet.

I'm not a contributor to this repo yet either so I can only help on the implementation end.

[ObaidAshiq]

@balbatross
Sorry, for disturbing
I got it fixed, as u said it might have been a slight bump(for me it wasn't)
I tried to go from 1.3.4 top above versions, but these versions are bugged as the resize handle isn't working this time
The issue seemed to be with w-auto in one of the div, i changed it to w-full (using tailwind CSS)
I am not sure what the problem is with using w-auto

This is the new code
<Doughnut
options={options}
data={chartInfo}
// className='w-auto max-h-full ' - OLD ONE
className=" w-full max-h-full " >

I will close this issue after I see a proper explanation